动画(uwp)

一、动画概要

动画实质上是一系列静止的图像，随着时间的推移不断进行切换，由于人眼的视觉反应存在误差，使连续播放的静止画面看起来是运动的，而某段时间内所切换的每一个静态画面被称为"帧"。假设在1秒内播放了25个静态画面，就可以称作"25帧/秒"。

1. 时间线(Timeline)

时间线由Windows.UI.Xaml.Meida.Animation.Timeline类表示，是描述动画过程的重要对象。它定义动画应持续的时间长度以及其他动画行为(如重复播放次数等)。持续时间(通过Duration属性设置)是动画过程的关键参数，运行时会根据设定的动画持续时间对动画播放细节进行调整。

除了持续时间外，Timeline类还允许设置以下参数：

BeginTime: 指定动画的开始时间。当某一动画过程是由多个时间线组成时，可以通过该属性来控制部分时间线上的动画延迟启动。

AutoReverse: 指示动画在播放完后是否进行反转。所谓"反转"即动画在播放完成时马上向反方向播放，最后回到原始状态。

SpeedRadio: 调整动画播放的速率。属性值为大于0的数值，默认为1，表示正常速度；如果属性值为2，表示两倍速率播放动画；如果为3就是三倍速率。这与视频播放软件中的调整播放速度的效果相近。

RepeatBehavior: 设置动画重复次数。类型为RepeatBehavior结构，如果Count属性为5则表示动画会连续播放5次；如果为Forever，表示动画无限重复。在XAML代码中，如果要指定动画重复4次，可以使用值"4x"(后面要加上小写字母x)，如果是无限循环可以指定Forever。

FillBehavior: 表示当动画播放完成后如何进行处理。类型为FillBehavior枚举，如果值为HoldEnd表示动画完成后将保持当前时间线状态，整个动画被终止，

2. 演示图版(Storyboard)

演示图板是沿用MSDN上比较常用的翻译，也有的资料将其翻译为"故事板"。Storyboard类从Timeline派生，表明它也属于时间线，但它比较特殊，它是动画时间线的容器，Children属性是时间线集合，即一个Storyboard对象中可以包含多个时间线对象。Storyboard类对整个动画过程具备控制能力，通过调用以下方法可以对动画进行操作：

• Begin: 开始播放动画
• Pause: 暂停播放
• Resume: 继续播放动画(相对于暂停状态)
• Stop: 停止播放动画
• Seek: 跳跃到某个时刻进行播放

一般来说，使用Storyboard有两种方式：直接在代码中(如C#代码)使用；在XAML中使用，可以把Storyboard实例声明为资源项，这种方式较常用，即在XAML中声明动画，然后在程序代码中调用Begin方法播放动画。

3. 动画分类

动画大体上可以分为两类：简单动画与关键帧动画。

在Timeline的派生类中，其中以Animation结尾的类表示简单动画。简单动画对目标值进行以下两种处理：

1. From...To: 动画使目标值从初始值变化为另一个值。例如，动画使某对象的高度从20增长为100，那么From值为20，To值为100。
2. By: 增量变化。例如把某对象的不透明度减去0.3，那么By的值为-0.3；将某对象向右平移60个单位，那么By的值为60。

以AnimationUsingKeyFrames结尾的时间线类型用于关键帧动画。关键帧动画的时间线可以包含多个关键帧，每个关键帧将与特定的时间点关联。例如，某关键帧动画总的持续时间为5秒，时间线上有三个关键帧，第一关键帧在1秒钟处，此时动画将目标对象放大2倍；第二个关键帧在3秒钟处，将目标对象缩小0.5倍；第三个关键帧在5秒钟处，此时把目标对象再放大3倍。

关键帧动画能够通过多个关键帧来更准确地控制时间线在不同时刻处理相应的目标值，而简单动画仅仅将目标值从初始值改变为最终值。

对于不同的数据类型目标值，都有与之相对应的时间线类型。例如，处理double类型的值，动画时间线可以选择DoubleAnimaiton或DoubleAnimationUsingKeyFrames；如果目标值是Point结构(表示一个坐标点)，则定义简单动画可以使用PointAnimation类，定义关键帧动画可以使用PointAnimationUsingKeyFrames类。

4. 如何与动画时间线关联

动画最终是要应用到可视化对象上的，那么，可视化对象又是如何与时间线关联的呢？

由于动画时间线是针对特定的类型的值而设计的(如double值应使用DoubleAnimation来处理)，因此动画时间线实质上是作用于对象的某个属性上的。前提条件是用于动画处理的属性必须是依赖项属性，例如UIElement类的Opacity属性就属于依赖项属性，它会有一个对应的静态成员OpacityProperty，类型为DependencyProperty。也就是说，所有依赖项属性都会存在一个名称以Property结尾的静态成员作为标识，如FrameworkElement.Margin属性的标识成员为MarginProperty。

动画时间线与目标依赖项属性关联的方法是通过Storyboard类的两个附加属性来实现的。尽管附加属性是在Storyboard类上声明的，但使用时是附加到Storyboard内部的某个时间线对象上的。

TargetName附加属性指定要与时间线关联的可视化元素的名字，因此，要应用动画处理的可视化元素，应当使用x:Name为其分配一个名字。TargetProperty附加属性则指定时间线对可视化元素的哪个依赖项属性进行处理。

如果在后台代码中使用Storyboard类，应该分别调用SetTarget方法和SetTargetProperty方法来设置目标对象与时间线的关联。

第一个示例在后台代码中声明动画内容：

        <StackPanel>
            <Path Grid.Column="2" HorizontalAlignment="Center" VerticalAlignment="Center" Width="300" Height="300"
              Stretch="Uniform" Fill="Yellow" RenderTransformOrigin="0.5,0.5">
                <Path.Data>
                    <GeometryGroup>
                        <EllipseGeometry Center="50,50" RadiusX="50" RadiusY="20"/>
                        <EllipseGeometry Center="50,50" RadiusX="20" RadiusY="50"/>
                    </GeometryGroup>
                </Path.Data>
                <Path.RenderTransform>
                    <RotateTransform x:Name="rttrf" Angle="0"/>
                </Path.RenderTransform>
            </Path>
            <Button Content="Play" Tag="play" Tapped="Button_Tapped" Margin="0,10"/>
            <Button Grid.Column="1" Content="Stop" Tag="stop" Tapped="Button_Tapped"/>
        </StackPanel>

Path元素声明了一个自定义几何图形路径，并应用了旋转变化(RotateTransform)，旋转角度为0度。

下面通过后台代码声明动画时间线，并对RotateTransform对象的Angle属性进行动画处理，使旋转角度从0度变为360度，即Path对象会发生旋转动画。

        Storyboard _storyboard = null;
        public MainPage()
        {
            this.InitializeComponent();
            _storyboard = new Storyboard();
            DoubleAnimation da = new DoubleAnimation();
            da.Duratio