动画填充路径 - Silverlight答案

【问题标题】：Animate a Path filling in - Silverlight动画填充路径 - Silverlight
【发布时间】：2011-02-04 13:37:31
【问题描述】：

给定一个封闭的贝塞尔曲线路径，我将如何对其填充进行动画处理。填充必须是非线性的 - 围绕一个锐角流动，而不仅仅是一个露出填充颜色的平面。

此时，我假设我必须使用 WriteableBitmap 并自己完成这一切。想法？

【问题讨论】：

标签： silverlight animation silverlight-4.0

【解决方案1】：

从中心开始向外扩展的 RadialBrush 通常看起来可以接受。有关示例，请参见 Kinectimals 网站的“着色页”部分。

另一个可行的实现是将形状应用到 Path 的 Clip 属性，然后将 StrokeThickness 属性设置为一个非常大的值。

<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>

【讨论】：

不知何故我错过了这条评论，谢谢你的想法。我们最终使用了可写位图来获得我们需要的效果。