Win8 Metro风格应用中梯形动画的一种实现方法（C# & XAML）

Win8 Metro风格应用中对各种形状的描画函数可以说比较齐全，矩形，梯形，圆形都可以很方便的描画出来。  

然而，在使用这些描画出来的形状进行动画处理的时候，会发现实现方法的差别还是很大的。 

 

比如，将一个矩形在1秒以内宽度从100增加到300的动画，使用如下方法就可以简单实现：  

1. 画一个矩形： 

    <Rectangle x:Name="aRect" Width="100" Fill="Red"/>

2. 在父容器的resource里添加如下storyboard：  

    <Storyboard x:Name="aRectAnimation"> 
        <DoubleAnimationUsingKeyFrames EnableDependentAnimation="True" Storyboard.TargetName="aRect" Storyboard.TargetProperty="Width"> 
            <LinearDoubleKeyFrame Value="100" KeyTime="0:0:0" /> 
            <LinearDoubleKeyFrame Value="300" KeyTime="0:0:1" /> 
        </DoubleAnimationUsingKeyFrames> 
    </Storyboard> 

3.在程序中调用： 

    aRectAnimation.Begin(); 

  

但是，类似的方法如果用在梯形（Polygon）动画上，就会悲剧的发现根本没有任何反应了。 

研究了半天，找到一种实现方法，不使用Polygon而是通过自己描画四条边的闭合图形来实现梯形的动画效果。 

下面的例子实现了一个上宽下窄的梯形向下延伸的动画：  

1.描画一个梯形 

    <Path Fill="Red"> 
        <Path.Data> 
            <PathGeometry> 
                <PathGeometry.Figures> 
                    <PathFigure StartPoint="0,0"> 
                        <PathFigure.Segments> 
                            <LineSegment Point="0,0"/> 
                            <LineSegment x:Name="aRectLP" Point="0,0"/> 
                            <LineSegment x:Name="aRectRP" Point="300,0"/> 
                            <LineSegment Point="300,0"/> 
                       </PathFigure.Segments> 
                    </PathFigure> 
                </PathGeometry.Figures> 
            </PathGeometry> 
        </Path.Data> 
    </Path> 

2.在父容器的resource里添加如下storyboard：  

    <Storyboard x:Name="aRectAnimation"> 
        <PointAnimation x:Name="aRectLPAnimation" EnableDependentAnimation="True" Storyboard.TargetName="aRectLP" Storyboard.TargetProperty="Point" From="0,0" To="0,500" Duration="0:0:0.5"/> 
        <PointAnimation x:Name="aRectRPAnimation" EnableDependentAnimation="True" Storyboard.TargetName="aRectRP" Storyboard.TargetProperty="Point" From="300,0" To="150,500" Duration="0:0:0.5"/> 
    </Storyboard> 

3.在程序中调用： 

    aRectAnimation.Begin(); 

以上只是一种实现梯形动画的方法，不排除会有更帅的写法，有时间会继续研究。