动效落地小指南
介绍当前动效正确落地方法
动效在应用内频繁出现，常见诸如下拉刷新，页面加载，图标微动效，开屏页动画等。但受限于动效本身特性，有不同制作方法，也就有了不同的落地方法。
一个好的落地方法满足以下三个条件：
运行流畅、体积较小。
保真度高，基本还原设计
符合实际页面交互需要。
根据过往经验，我分析下不同动效的最优落地方式。
（一）用svg或者其他矢量格式制作的动效果，且无ae特效。
该类动效最适合的实现方式为json格式，一般通过使用ae插件Lottie导出给开发即可，文件体积小，且基本都能完美还原设计。
Lottie官方地址https://lottiefiles.com/featured
（二）用像素位图做的特效，且在ae内只进行基础的动效制作，非使用特效。
这时有两类方式可以完美还原设计，且保持最小体积：
一类是提供位图源文件+动效说明，让开发用代码还原；
另一种方式是用ae插件导出svga格式，可以节省开发写代码时间，但受限于官方更新速度，小程序（h5）个别系统iOS版本的手机不支持还原显示。
svga官方地址https://svga.io/（图片来自网络）
（三）其他制作方式（ae里使用了复杂特效或者3d软件导出视频等） 该类型。
最优解是视频格式（mp4），体积小且完美还原设计，但是视频格式无法进行交互操作，且个别平台端无法自动播放，实际使用次数很少。
退而求其次，一般使用png序列还原设计，效果完美，且可与屏幕高度与播放进度绑定，但缺点也很明显，文件过大，只适合小图标级别动效，若当背景，一般是要抽掉中间的帧数，跳帧播放。
若对实现效果无太大要求，或者背景不透明，追求体积最小化，则gif是最优解，但若是半透明渐变背景，则效果基本不达标，因为gif只支持全透明或完全不透明显示，半透明只能是视觉上模拟，致使半透明区域全是杂点或锯齿。
此外还有svga格式的序列反导软件再导出，本质和png序列并无太大区别，只是把序列打成一个文件，方便开发直接调用，大小清晰度并没什么区别。
（图片@milkinside）
以上为个人工作经验，若有错误之处，敬请指正。
