Framer之动画 | 让播放器的摆针动起来

之前的Framer教程都是按照个人喜好去写的，没有按照难易程度形成系列。为了让大家能更好地入门，我准备由易到难写一个系列教程，尽量保持在每周一篇的频率。

导读：动画一般和图层一起用，它可以让图层动起来。我们可以通过一系列属性，诸如执行动画的图层、需要变化的可视属性、动画时间、动画延迟时间等，来定义一个动画。动画也提供了一些函数可以让你控制它的开始、结束和反向。

这里先介绍一下动画。在Framer中，动画是相对于图层来说的，也就是说我们可以给某个图层定义一个不同的样式，让该图层从最开始的默认样式到这个样式之间产生一段平稳的过渡变换就形成了动画。比如说一个图层的宽度由200像素慢慢变成400像素，就是一段动画。我们无需关心这中间是怎样变化的，只需要定义开始和结束状态的样式，就可以让它自己产生一段动画。

animation

和图层一样，动画也是一个对象，但是没有图层那么直观，它有点抽象。你可以理解为，这个动画对象存储了一系列动画设置的数据。它存储的属性值有做变化的图层、做变化的属性、运动曲线、运动时间、延迟时间、重复次数、颜色模式等。

property

看我们通过这个实例来看动画对象怎么用吧。在上一次的基础上，我们继续编写代码让这个摆针动起来。

上次那些图层对应的代码很长，我们接着后面写会越来越长，会把自己看晕的。不过没关系，Framer提供了代码折叠功能，可以选中一部分代码使其折叠，需要时再展开。

code fold

将代码折叠后，在后面添加如下代码。可以看到，和创建图层一样，我们也使用了关键词new来创建一个Animation对象，我给他起名为：swingingAnimation。后面分别设置它的运动时间是2s，延迟1s执行，需要执行动画的图层是swing，需要变化的属性是它的转动角度。最后通过动画对象自带的“开始动画”方法start()来执行动画。

animation start

因为延迟1秒，所以等待1秒之后我们就可以看见效果啦。

initial

等等，好像有点不对，它不是从右上角转轴处开始转的，而是从正中心开始旋转。我们需要把他的变换中心放置在右上角转轴处，这样就可以让它绕着转轴旋转啦。所谓变换中心，你应该在Ps或者Sketch中接触过，如下图。

origin

所以在这里我们应该给图层swing添加两个属性originX和originY，他们的取值范围都是0到1。如果originX等于0，就代表其变换中心在左边缘，如果originX等于1，就代表其变换中心在右边缘，originY则是相对于上下边缘。

双击被折叠的代码进入编辑，给它增加变换中心属性。

change origin

在Framer中，变换中心也可以像在Ps中调节的，但是没有那么好用。进入swing的设计模式，按住Command键，图层上会出现一个半透明黑色的圆点，它就是变换中心。拖动它就可以改变它的位置，但是我操作时由于该图层太小而且它总是会被旁边的控制点（周围六个白点）吸过去，所以最后我还是直接调节数字慢慢试出来的。

visual justify

最后调好的效果就是这样：

final demo

动画还提供了一个方法reverse()，可以将动画反向。如果将刚才做的动画反向，那么摆针摆到左边后会再摆回到初始位置。需要注意的是，该方法不是将动画“反向并执行”，而只是“反向”，所以如果需要执行需要再次调用start()方法。

reverse

在最后加上这段代码，就可以看见摆针摆到左边之后，又向右摆回到初始位置。

ok

总结一下这一节所讲的内容：

1、动画也是一个对象，不过这个对象比较抽象。
2、动画需要和图层结合使用，因为它是对图层的可视属性进行操作。
3、动画提供了start()、stop()和reverse()三个方法来控制动画开始执行、停止和反向。
4、反向方法reverse()相当于新建了一个反过来的动画对象，它不包含动画开始指令。

点击这里获取源代码和图片素材，试着自己做一下，下回我们继续使用这个播放器讲解Framer的状态。