UWP 开发中阶 Chapter 2 - 通过 KeyFrame 实现更复杂的 Storyboard Animation

距离上一篇已经有些时日了，上一篇中我们讲到了一种简单的动画 —— Storyboard Animation。这种动画的局限性在于，它自身很有可能出现掉帧的可能，因为它是同软件的 UI 在同一线程上运行的。上篇讲过了最基础的使用，但是这显然在日常开发中是远远不够的。比如我们想让正方形在平行水平移动的时候，不是一直从左到右移动，而是左边一段，右边一段。这时候我们就需要引入本篇的内容 —— KeyFrame。

本篇正文

什么是 KeyFrame ？

KeyFrame 简单来讲就是时间上的关键点。举个例子，我们有一个正方形，原点在横坐标 0 的位置，我们需要它在第三秒的时候移动到横坐标 200 的位置，而第五秒的时候移动到横坐标 100 的位置，最后我们需要在第八秒的时候移动到横坐标 250 的位置。这个例子中，一些关键的时间点比如第三秒、第五秒和第八秒就是所说的 KeyFrame

简单语法与使用

我们来尝试去实现上面那个例子，基本语法和上文相似。完整代码如下：

<Storyboard x:Name="Translation">
<DoubleAnimationUsingKeyFrames
		Storyboard.TargetName="TestBorder"
		Storyboard.TargetProperty="(Canvas.Left)"
		Duration="0:0:8">
	<LinearDoubleKeyFrame KeyTime="0:0:3" Value="200"/>
	<LinearDoubleKeyFrame KeyTime="0:0:5" Value="100"/>
	<LinearDoubleKeyFrame KeyTime="0:0:8" Value="250"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
复制代码

解释：其中最外面用 DoubleAnimationUsingKeyFrames 进行包裹，然后填入要动画的对象与其属性，还有动画进行的总共时长。然后在其中写入三个 LinearDoubleKeyFrame ，其中 KeyTime 就是关键点的时间， Value 就是这个关键点上对应的值。与 LinearDoubleKeyFrame 相并列的还有多个，如 DiscreteDoubleKeyFrame 等，下面会单独讲。

• 检查一下效果，动图如下：

  

多种 KeyFrame 的形式

1. LinearDoubleKeyFrame 这就是我们刚才使用到的。名字很直观，就是线性的。那么什么是线形的？就是你设定完相应的 KeyFrame 后，中间空出来没有详细设定的部分，将会进行匀速运动。正如上面的动图所展示的。
2. DiscreteDoubleKeyFrame 如果使用这个的话，那你的正方形便会在设定的时间，突然变到设定的位置。中间空出为设定的时间，你的物体是不会产生变化的。
3. SplineDoubleKeyFrame
4. EasingDoubleKeyFrame

上述的 3、4 两种都是属于变速的，而其中第四个可以根据不同的函数进行变速，这里暂时不细讲啦。