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>