动图的落地方法经验总结附带插件地址

最近工作需要输出动效给开发，在这过程中走了很多弯路，导致耗时交付时间较长，现在总结一下自己在过程中遇到的问题，在界面设计的过程中，我们有时会用到动效设计来提升界面的趣味性和引导性，让用户浏览过程中不会太枯燥，获得更好的体验。为了能更好的交付我们需要了解动效交付的几种常用格式。

①PNG的序列帧

PNG的序列帧每一帧输出成一张图片，然后交付给开发，但是这个基本上没人用，因为一秒钟通常是24帧也就是24张图，资源太大。

导出序列帧的方法很简单：直接在AE中选择PNG序列即可，如果要导图透明的图，需要选择选择RGB+Alpha通道，如下图。

优化方法：可以将图片导成雪碧图，就是将所有图片合并在一张图上的方法，然后利用CSS的背景定位来显示需要显示的图片部分。

这里需要在AE中运行运行“CSS-Sprite-Exporter”脚本，就可以快速生成雪碧图了

附下载地址：https://github.com/bigxixi/CSS-Sprite-Exporter

②GIF格式

GIF 支持安卓、iOS、网页，可以说也是最常用的格式之一。也是我们平时见到的比较多的动效格式，GIF文件一般都比较小。

AE不能直接导出GIF格式，需要用PS转一下格式，我说一下我自己用的方法：AE导出AVI格式/QuickTime格式，然后PS打开后用PS导出GIF格式

GIF的缺点是颜色会失真，这是因为GIF最多包含256色。对比JPG失真，属正常情况，另外GIF对半透明效果真的很不友好，导出的效果基本上不能用，只能寻求其他解决方式。

③Lottie格式

Lottie 是一个用于 Android、iOS、Web、Windows 的动画库，通过bodymovin 导出为 json 文件的 AE 动画；lottie 是针对矢量动画开发的，不太适合图片过多的情况，图片过多会增加文件负荷，所以最好是将图片转化为路径动画。

在 AE 里导入到 Lottie 的图层不能识别矢量渐变。不能支持外置插件的效果，比如粒子、光效等。

附bodymovin插件下载地址：https://www.jb51.net/softs/665385.html

导出json后，也可以再bodymovin插件中预览效果，具体方法如下图

以上就是我所知道的动效落地经验总结，希望能够帮助大家。