Animate a Path filling in - Silverlight

Question

Given a closed Path of bezier curves, how would I go about animating it filling in. The fill would have to be non-linear - flowing around an acute angle rather than just a plane uncovering the filled color.

At this point, I'm assuming I'd have to use a WriteableBitmap and do it all myself. thoughts?

Answer 1

A RadialBrush originating from the center and spreading outwards often looks acceptable. See the "Coloring Pages" section of the Kinectimals website for an example.

Another implementation that might work would be to apply the shape to the Path's Clip property, then animate the StrokeThickness property to a very large value.

<Grid x:Name="LayoutRoot" Background="White">
    <Grid.Resources>
        <Storyboard x:Name="FillShape">
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.StrokeThickness)" Storyboard.TargetName="path">
            <EasingDoubleKeyFrame KeyTime="0:0:0.7" Value="118">
                <EasingDoubleKeyFrame.EasingFunction>
                    <CircleEase EasingMode="EaseOut"/>
                </EasingDoubleKeyFrame.EasingFunction>
            </EasingDoubleKeyFrame>
        </DoubleAnimationUsingKeyFrames>
    </Storyboard>
    </Grid.Resources>
    <Path x:Name="path" Data="M118,128 C182,300 238,342 330,252 C422,162 358,-40.000271 270,37.999855 C182,115.99998 118,128 118,128 z" Margin="117.5,19.95,264.563,181.398" Stretch="Fill" Stroke="Black" UseLayoutRounding="False" Clip="M0.4999969,108.05005 C64.500069,280.04974 120.50012,322.04968 212.50023,232.04984 C304.50034,142.04999 240.50026,-59.949921 152.50015,18.050066 C64.500069,96.050049 0.4999969,108.05005 0.4999969,108.05005 z" StrokeThickness="0"/>
</Grid>