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

上述的 三、4 两种都是属于变速的，而其中第四个能够根据不一样的函数进行变速，这里暂时不细讲啦。

DoubleAnimationUsingKeyFrames 的经常使用属性

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

本篇结语

前文除了 DoubleAnimation，还讲到了其余的动画，不知你是否还记得。在这篇 KeyFrame 中前文提到的几种动画也都是能够的，方法相似，所以再也不赘述。本篇的基本知识仍是很简单的，不过也有不少值得深刻的地方，实现漂亮的动画彻底是可能的！看大家的创造力啦！

好啦！咱们下篇见！