前言
大家在设计工作中经常需要做一些小的交互动效或者视觉特效，来辅助视觉设计引起用户注意。一些APP中的常见的交互动效我们可以通过Principle、Flinto等工具设计制作，这类动效对于开发来说一般可以用系统自带的动效库完成，难度不大！
但是对于一些视觉特效、非逻辑表达类动画，设计师通常会借助 AE 完成，对月开发来说开发难度就会比较大了。今天这篇文章就给大家分享下这类动效我们在工作中常用的落地方法，以及实现这些动效怎么和程序员对接。
目前，从视觉特效、非逻辑表达类动画落地的解决方案上主要分两种：
1、图片格式动画；
2、跨平台解决方案：
下面我们就一起来看看这两种解决方案：
一、图片格式动画
1 、PNG序列
PNG 序列帧动画是一种比较早的动画类型，通过连续切换一组分解的动画序列形成动画。后来为提高性能，发展出雪碧图（精灵图），就是将所有帧图片合并在一张大图上，通过位移实现动画帧切换。比如下面的图：
总结：
PNG 虽然实现方式较为原始，但确是一种最为稳妥的解决方案，除了图片体积太大，没有别的缺点，想必大部分项目中都使用过，这里不多加赘述。
APNG 是从 PNG 基础上拓展出来的，是一个支持24 位色彩通道和 8 位透明通道的动画格式，对透明通道的支持非常优秀。
比如这张图：https://tinypng.com/images/apng/panda-waving-2x.png
美中不足的是，IE 浏览器不支持 APNG，原生尚可，一般项目中用的很少，期待 APNG 未来兼容性能有所改善。
2、GIF图
提到GIF图大家应该都不陌生，他是除 PNG 之外另外一种比较传统的动画格式，但是gif格式仅支持 8bit彩色，并且还不支持半透明通道，出现的年代久远，压缩技术比较差，动画边界有明显的杂边，一般用在对动画精度要求不高的地方。
我们比较一下上面 PNG 序列帧转为 GIF 之后的表现。从文件体积上看，GIF 比 PNG 序列小了 76% 。但是，从动画细节上看，GIF的边界粗糙有锯齿，且无法消除。
总结：
对于比较简单的动画，如果只有2个选择，在不需要做成透明的情况下，选择 GIF 好于 PNG 。但是，从程序员的角度看，一些复杂的 GIF 有时会引起周期性的重绘，占用较多的系统内存，有一定的性能风险。
3、WebP
WebP 是 Google 开发的一款用于改善 GIF 的新动图格式，支持 24bit 彩色并且支持透明，兼容性较好，在项目中用的比较多。
总结：
WebP 和 GIF 的差异到底在哪里：
1. 文件体积上，WebP 似乎没有明显的优势，对比以上两组动画，很难讲 WebP 一定更好。
2. 效果呈现上，WebP 支持了真正的透明，而 GIF不支持透明，所以 WebP 的细节一定更好。
3. 兼容性上，WebP 虽不如 GIF， 但也算支持良好，不影响使用。
综上，WebP 算是一种更完美的 “GIF” 。如果对文件体积不敏感，且没有更好的动画解决方案时，使用 WebP 是个不错的选择。
4、WebM
除了 WebP，还有一种 WebM ，多见于游戏类网站，比如《炉石传说》的 Landing Page页面：https://hs.blizzard.cn/landing
总结：
WebM 仅支持Web，原生不支持。
WebP 导出工具：
https://github.com/bigxixi/webp_apng_exporter_for_AE （文件可以在浏览器预览）
WebM 导出工具：
https://www.fnordware.com/WebM/ WebP
综上所述，通过以上对比分析，图片格式动画的体积都比较大。综合的还原效果、兼容性和性能，WebP 最佳，GIF几乎和质量无缘且不支持透明，PNG 过于原始且体积一般比较大。
