学步园

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

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

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

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

X和Y定义移动方向

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

AngleX，AngleY扭曲角度

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

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

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

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

框架代码：

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

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

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

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

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

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

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

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

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

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