如何让动效又快又好落地？我分析了这5种格式的优缺点

动效设计，可以提升界面的趣味性和引导性，让用户浏览过程中不会太枯燥，获得更好的体验。

最近做的金山知了（后面改名为金山知识库）官网，头图元素加入了缓动效果，第一眼挺新颖的。金山协作新年许愿活动，许愿按钮加入了运动的形象，更能吸引用户点击。

不过，输出动图和开发对接的过程中，我也遇到过一些问题：导出的动图模糊、资源太大、开发不支持动图格式等等，当时也是想尽办法地解决。

这次我总结了几种常用的动图格式，也提及我输出动图过程遇到的问题和解决方法，以及我们设计师该如何选择合适的动图格式。

1. 序列帧
2. GIF
3. Lottie
4. APNG
5. SVGA

序列帧

刚开始接触动效，我最先了解到的 PNG 序列帧，就是输出动图的每一帧图片，然后交付开发，按帧播放图片实现。

比如这个加载动画，我的练习作品，导出序列帧资源很大，所以我平时基本不用这种格式。

导出方法：

AE 输出选择 PNG 序列，如果要导出透明背景，通道选择 RGB+Alpha。