動畫填充路徑 - Silverlight

Question

給定一條閉合的貝塞爾曲線路徑，我將如何去填充動畫。填充必須是非線性的 - 圍繞銳角流動而不是僅僅是一個揭示填充顏​​色。

在這一點上，我假設我必須使用一個WriteableBitmap並自己完成這一切。想法？

Answer 1

從中心向外擴散的RadialBrush通常看起來可以接受。有關示例，請參閱Kinectimals網站的「着色頁」部分。

另一個可能工作的實現方式是將形狀應用到Path的剪輯屬性，然後將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>