XAML变形和动画

1. 使用RotateTransform进行旋转变形

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

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

2. 使用ScaleTransform进行缩放

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

<Rectangle Fill="#FFFF0404" Stroke="#FF000000">
<Rectangle.RenderTransform>

<ScaleTransform ScaleX="2" ScaleY="2" ></ScaleTransform>

</Rectangle.RenderTransform>

</Rectangle>

3. 使用TranslateTransform移动一个对象

X和Y定义移动方向

<Rectangle Fill="#FFFF0404" Stroke="#FF000000">

<Rectangle.RenderTransform>

<TranslateTransform X="150" Y="150"></TranslateTransform>

</Rectangle.RenderTransform>

</Rectangle>

4. 使用SkewTransform扭曲对象

AngleX，AngleY扭曲角度

<Rectangle Fill="#FFFF0404" Stroke="#FF000000">

<Rectangle.RenderTransform>

<SkewTransform AngleX="45"></SkewTransform>

</Rectangle.RenderTransform>

</Rectangle>

5. 使用MatrixTransform自定义变形

<Rectangle Fill="#FFFF0404" Stroke="#FF000000" >

<Rectangle.RenderTransform>

 <MatrixTransform Matrix="1 0 1 2 0 1"></MatrixTransform>

</Rectangle.RenderTransform>

</Rectangle>

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

<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>

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

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

框架代码：

<Rectangle Fill="#FFFF0404" Stroke="#FF000000" >

<Rectangle.Triggers>

<EventTrigger RoutedEvent="Rectangle.Loaded">

<BeginStoryboard>

<Storyboard></Storyboard>

</BeginStoryboard>

</EventTrigger>

</Rectangle.Triggers>

</Rectangle>

8. 动画相关参数

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

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

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

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

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

<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>

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

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>