UWP 开发中阶 Chapter 2

06 Sep 2018 in 中阶

通过 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 两种都是属于变速的，而其中第四个可以根据不同的函数进行变速，这里暂时不细讲啦。

DoubleAnimationUsingKeyFrames 的常用属性

1. AutoReverse 默认为 False ，如果设定为 True 的话，那当你完成第一次动画后，会自动帮你做一次反向的动画，结束后便停止了。
2. RepeatBehavior 这里面你可以设置为 Forever 或者设置次数，或者设置时间间隔。设置为 Forever 的话，那这个动画就会一直进行。如果你设置为次数（int），那么这个动画就会执行相应的次数。如果你设置为时间间隔（0:0:10 的格式），那么将会在执行完相应的时间后停止。

本篇结语

前文除了 DoubleAnimation，还讲到了其他的动画，不知你是否还记得。在这篇 KeyFrame 中前文提到的几种动画也都是可以的，方法类似，因此不再赘述。本篇的基本知识还是很简单的，不过也有很多值得深入的地方，实现漂亮的动画完全是可能的！看你们的创造力啦！

好啦！我们下篇见！