All geek questions in one place

Animate Path Fill - Silverlight

Given the closed trajectory of Bezier curves, how could I animate its filling. The filling should have been non-linear - flowing around an acute angle, and not just a plane revealing the filled color.

At this point, I assume that I will have to use WriteableBitmap and do it all on my own. thoughts?

+3
source share
1 answer

RadialBrush, coming from the center and extending outward, often looks acceptable. See the Coloring Section on Kinectimals for an example.

Another implementation that could work is to apply the form to the Path Clip property and 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>
+2
source

Source: https://habr.com/ru/post/1789983/

More articles:


All Articles