WP8.1动画与变换区别以及Storyboard->DoubleAnimationUsingKeyFrames,Renderform和Projection的区别

学WP8.1以来，动画和变化这两个东西一直困扰着我，对应的Storyboard,Renderform以及Projection究竟有何区别我

也不是很明白。不知道大家有没有这种困惑。

所以对于强迫症患者的我必须花点功夫好好琢磨琢磨，以下是我的一些感受和理解，不一定是很正确，大家互相学习

要点一：(UIElement.RenderTransform)

先说变换，首先要记住变换是控件的一种属性，VS中控件基本上都是有这种属性的

所以说控件的属性是写不到Storyboard中去的！

归结为代码必须这样写：

<Grid>
        <!--例1-->
        <Rectangle>
            <Rectangle.RenderTransform>
                <TranslateTransform/>
                <!--
                <RotateTransform/>
                <ScaleTransform/>
                <SkewTransform/>
                --><!--<span style="font-family:KaiTi_GB2312;">单个写四者取其一</span>-->
            </Rectangle.RenderTransform>
        </Rectangle>
        <!--例2-->
        <StackPanel>
            <StackPanel.RenderTransform>
                <TransformGroup>
                    <TranslateTransform/>
                    <RotateTransform/>
                    <ScaleTransform/>
                    <SkewTransform/>
                </TransformGroup>
            </StackPanel.RenderTransform>
        </StackPanel>
        <!--例3-->
        <TextBlock>
            <TextBlock.RenderTransform>
                <CompositeTransform>
                    <CompositeTransform.Rotation>12</CompositeTransform.Rotation>
                    <CompositeTransform.ScaleX>23</CompositeTransform.ScaleX>
                    <CompositeTransform.ScaleY>34</CompositeTransform.ScaleY>
                    <CompositeTransform.SkewX>45</CompositeTransform.SkewX>
                    <CompositeTransform.SkewY>56</CompositeTransform.SkewY>
                    <CompositeTransform.TranslateX>67</CompositeTransform.TranslateX>
                    <CompositeTransform.TranslateY>78</CompositeTransform.TranslateY>
                </CompositeTransform>
            </TextBlock.RenderTransform>
        </TextBlock>
    </Grid>

其实还有一个MatrixTransform变换，我用的比较少就不写了。大家有兴趣自己摸索摸索。

先总结下：

    简单变换分TranslateTransform，RotateTransform，ScaleTransform，SkewTransform这四种

    复杂变换可以使用TransformGroup，CompositeTransform

    归根结底，所有的变换都要在控件的RenderTransform属性中写！！！

从以上可以看出：

    1.VS中大部分的控件都是可以使用RenderTransform这个属性的

    (不管是布局控件StackPanel，文字控件TextBlock或者图形控件Rectangle都是可以的)

    2.控件一旦要用到变换必须要写在控件的RenderTransform里面，RenderTransform是老大，

    没RenderTransform就不可以写具体的平移，旋转等变换

    3.可以只写单个变换，但依旧要在RenderTransform里面，如上面的例1所示

    4.可以几个变换一起写，这时这几个变换包含子在TransformGroup或者CompositeTransform中。如上面的例2和

例3所示，但依旧要在RenderTransform里面
   5.TransformGroup和CompositeTransform的区别是，前者变换是叠加的，后者变换是独立的，如果不是很理解的

话可以自行试试，终究是纸上得来终觉浅

    6.CompositeTransform比较特殊，里面不是写TranslateTransform这种变换形式，

    而是直接对一个的TranslateX，TranslateY的形式，这点请注意！！！！

重要补充：

    变换要有变换中心，而变换中心的选取和调整有两种方案。变换的原始中心在元素的左上角

    一种就是具体变换的CenterX,CenterY属性，属于绝对定位，不太容易把握

    另外就是UIElement的RenderTransformOrigin属性，属于相对定位，取值在0-1之间

要点二：(UIElement.Projection)

上面说的是关于RenderTransform的变换，其实还有Projection变换，然而这个就侧重于

三维透视效果

这里Projection也是老大，地位相当于RenderTransform一样。

主要用到的变换是旋转RotationX，RotationY，RotationZ

<Image>
       <Image.Projection>
            <PlaneProjection>
                <PlaneProjection.RotationX>12</PlaneProjection.RotationX>
                <PlaneProjection.RotationY>23</PlaneProjection.RotationY>
                <PlaneProjection.RotationZ>34</PlaneProjection.RotationZ>
            </PlaneProjection>
       </Image.Projection>
</Image>

重要补充：

    变换中心：

    通过CenterOfRotationX，CenterOfRotationY和CenterOfRotationZ来实现，取值在0-1之间

    偏移：

    本地偏移：相对于屏幕的偏移(LocalOffsetX，LocalOffsetY，LocalOffsetZ)

    全局偏移：相对于移动屏幕的偏移

    (GlobalOffsetX，GlobalOffsetY，GlobalOffsetZ)，这个可以做很多好看的特效，大家可以尝试尝试

要点三：动画(Storyboard->DoubleAnimationUsingKeyFrames)

上面讲完了变换，剩下就是动画了。变换只是变了，去没有一个时间过度，它只呈现开始状态和结束状态，而中间的

一些美好的过渡却没有，而动画正是为了这个过渡而来的。

所以正如上面所说，动画的对象是谁，或者这样说，对什么进行动画，当然对变换了。

动画也有单个动画DoubleAniamtion,ColorAnimation等

当然动画也有复杂的，将几个动画合并起来的。这时候就要用到

DoubleAnimationUsingKeyFrames这种类似xxxxAniationUsingKeyFrames关键帧动画时间线了。

这时候DoubleAnimationUsingKeyFrames就是老大了，里面的关键帧动画包含着

LinearDoubleKeyFrame，SplineDoubleKeyFrame，EasingDoubleKeyFrame等等。

关于变化和动画怎么连接起来呢，自然要用到x:name的属性，然后通过

storyboard.targetname=""进行绑定即可！

暂时就说到这了，具体的内容和区别还是要靠大家自行写代码实现一下才能记住。

推荐一个很好的博客地址，里面的内容都很不错。

连接：http://blog.csdn.net/tcjiaan/article/list/4