学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