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>

使用 ScaleTransform 进行缩放

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

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

使用 TranslateTransform 移动一个对象

X和Y定义移动方向

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

使用 SkewTransform 扭曲对象

AngleX，AngleY扭曲角度

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

使用 MatrixTransform 自定义变形

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

整合变形，使用 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>

动画框架包含 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>

动画相关参数

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

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

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

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

设置动画时间： Duration 属性格式 HH:MM:SS 设置动画开始时间 BeginTime="0:0:5" SpeedRatio 加倍改变动画的时长 SpeedRatio="2" AutoReverse 来定义动画的反转 使用 Repeat Behavior 属性来定义动画结束的行为 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>

使用关键帧三种类型 后添加 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>