阅读 57

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

DoubleAnimationUsingKeyFrames 的常用属性

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

本篇结语

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

好啦!我们下篇见!

关注下面的标签,发现更多相似文章
评论