XAML变形和动画

 

1. 使用RotateTransform进行旋转变形

2. Angle属性定义选择角度，CenterX，CenterY旋转中心点。

   <TextBlock Text="This is the text to rotate!" TextWrapping="Wrap" Foreground="White"/> <TextBlock.RenderTransform> <RotateTransform Angle="45"/> </TextBlock.RenderTransform>

3. 使用ScaleTransform进行缩放

4. ScaleX定义横向缩放，ScaleY定义纵向缩放，CenterX，CenterY分别定义中心点

   <Rectangle Fill="#FFFF0404" Stroke="#FF000000"> <Rectangle.RenderTransform> <ScaleTransform ScaleX="2" ScaleY="2" ></ScaleTransform> </Rectangle.RenderTransform> </Rectangle>

5. 使用TranslateTransform移动一个对象

6. X和Y定义移动方向

   <Rectangle Fill="#FFFF0404" Stroke="#FF000000"> <Rectangle.RenderTransform> <TranslateTransform X="150" Y="150"></TranslateTransform> </Rectangle.RenderTransform> </Rectangle>

7. 使用SkewTransform扭曲对象

8. AngleX，AngleY扭曲角度

   <Rectangle Fill="#FFFF0404" Stroke="#FF000000"> <Rectangle.RenderTransform> <SkewTransform AngleX="45"></SkewTransform> </Rectangle.RenderTransform> </Rectangle>

9. 使用MatrixTransform自定义变形

10. <Rectangle Fill="#FFFF0404" Stroke="#FF000000" > <Rectangle.RenderTransform> <MatrixTransform Matrix="1 0 1 2 0 1"></MatrixTransform> </Rectangle.RenderTransform> </Rectangle>

11. 整合变形，使用TransformGroup实现多重变换

12. <Rectangle Fill="#FFFF0404" Stroke="#FF000000" > <Rectangle.RenderTransform> <TransformGroup> <ScaleTransform ScaleX="1.2" ScaleY="1.2"/> <SkewTransform AngleX="30"/> <RotateTransform Angle="45"></RotateTransform> </TransformGroup> </Rectangle.RenderTransform> </Rectangle>

13. 动画框架包含Triggers，Event Triggers和Storyboards，

14. 必须注意RoutedEvent 只支持Loaded事件。

    框架代码：

    <Rectangle Fill="#FFFF0404" Stroke="#FF000000" > <Rectangle.Triggers> <EventTrigger RoutedEvent="Rectangle.Loaded"> <BeginStoryboard> <Storyboard></Storyboard> </BeginStoryboard> </EventTrigger> </Rectangle.Triggers> </Rectangle>

15. 动画相关参数

16. 动画处理类型：Double类型：可以使用DoubleAnimation或者DoubelAnimationUsingKeyFrames两种类型

    Point类型，可以使用PointAnimation或者PointAnimationUsingKeyFrames两种类型，Color类型，可以使用ColorAnimation或者使用ColorAnimationUsingKeyFrames类型

17. 定义动画对象：Storyboard.TargetName定义对象，storyboard.TargetProperty 定义属性。

18. <DoubleAnimation Storyboard.TargetName="rect" Storyboard.TargetProperty="(Canvas.Left)"/>

19. 设置动画时间：Duration属性格式 HH:MM:SS
20. 设置动画开始时间BeginTime="0:0:5"
21. SpeedRatio加倍改变动画的时长 SpeedRatio="2"
22. AutoReverse来定义动画的反转
23. 使用RepeatBehavior属性来定义动画结束的行为RepeatBehavior="2x"

24. <Rectangle Stroke="#FF000000" x:Name="rect" Fill="Black"> <Rectangle.Triggers> <EventTrigger RoutedEvent="Rectangle.Loaded"> <BeginStoryboard> <Storyboard> <ColorAnimation Storyboard.TargetName="rect" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" To="#00000000" Duration="0:0:10" AutoReverse="true" RepeatBehavior="Forever"/> </Storyboard> </BeginStoryboard> </EventTrigger> </Rectangle.Triggers> </Rectangle>

25. 使用关键帧三种类型 后添加UsingKeyFrames后缀

26. Linear关键帧：使用这种方式可以加速或减速线性变换效果

    <Rectangle Stroke="#FF000000" x:Name="rect" Fill="Black"> <Rectangle.Triggers> <EventTrigger RoutedEvent="Rectangle.Loaded"> <BeginStoryboard> <Storyboard> <DoubleAnimationUsingKeyFrames Storyboard.TargetName="rect" Storyboard.TargetProperty="(Canvas.Left)"> <LinearDoubleKeyFrame KeyTime="0:0:1" Value="300"/> <LinearDoubleKeyFrame KeyTime="0:0:9" Value="600"/> </DoubleAnimationUsingKeyFrames> </Storyboard> </BeginStoryboard> </EventTrigger> </Rectangle.Triggers> </Rectangle>

    使用Discrete关键帧是对象的值在关键帧的位置阶跃到定义值

    使用Spline关键帧定义平滑的加速或减速过程，使用KeySpline定义二次曲线的控制点

    <DoubleAnimationUsingKeyFrames Storyboard.TargetName="rect" Storyboard.TargetProperty="(Canvas.Left)"> <SplineDoubleKeyFrame KeyTime="0:0:5" KeySpline="0.3,0 0.6,1" Value="600"></SplineDoubleKeyFrame> </DoubleAnimationUsingKeyFrames>