“这个滑动的时候要快点。”
“这样子？”
“不是，再快一点点。”
……
作为UI开发，在做web端动画的时候，总会和设计师有这样的对话。如今的流程是，设计师用AE做好动画输出一个视频，然后UI开发对着视频做动画。那么在沟通的时候就会很不清楚，UI开发无法得到有效的参数去写CSS，只能靠“感觉”，那么得出的效果很可能就不能还原动画视频。和设计师沟通修改沟通修改，这么一路下来便浪费不少时间和精力。为了找到有效的对接方式，笔者寻找和对比了各种交互动画制作软件。
AE
原理就是根据时间轴，制作动画中多个关键帧，然后由软件计算其中的变换过程。
时间轴
关键帧
优点是可以制作比较复杂的动画效果，能够比较精确地控制每一帧。缺点是不能和sketch无缝对接，制作动画时比较耗费时间，每次都需要输出动画视频、比较麻烦，而且动画复杂的话，参数不适用于写CSS，在web端较难还原效果。
sketch 插件Animatemate
也是设置关键帧，选择不同的贝塞尔函数再输出，相比AE更为简便快捷，可以输出视频和�gif，适用于不复杂的交互动画。使用的贝塞尔函数相对固定，UI开发可以较好的理解动画过程。而且现在设计师基本用sketch，可以很好的无缝对接。
principle
principle
制作补间动画十分快捷，入门门槛低，可导入sketch，因此可以跟sketch无缝对接。UI开发能获取到明确的时间、变换的属性、贝塞尔函数等参数。能够导出视频或gif。能够模拟各种手势或事件，principle mirror可以使得在手机上实时预览交互效果。
