bodymovin踩坑记(GIF/序列动画/svga对比)

工作中遇到要给扫脸门禁机界面配“科技感”动效的需求。要做一个带光效的动效。做GIF以后，开发在安卓系统门禁机上播放会有卡顿，而且内存占用夸张，让整个流程都很卡。开发提出要用别的形式实现。我因此看了很多文章，踩了一些动效方面的坑。

1. GIF

优点：
无需开发配合，简单
缺点：
1、GIF只有不透明和全透明像素，容易有毛边，做光效动画不理想。
2、支持颜色少，渐变很可能会分层。
3、交互拓展差。
4、文件大，非常耗内存和性能。

2. PNG帧动画

实现方式：
在AE中做好动效后在ME中输出时选择png序列。开发每帧替换图片实现动画。
优点：
所有效果都能用这个方法实现
缺点：
1、图片资源大；
2、常用于web端
3、高不高效主要看开发实现方式
4、通过代码的播放设置实现一定交互效果
优化技巧：
1、设计师可将所有帧合成雪碧图，常用于web/H5优化，减少请求次数，有助于缓解切换图片的闪烁和渲染卡顿。图片存储在本地时效果不明显（AE中导出雪碧图插件：CSS Sprite Exporter）。
2、设计师导出的png图片可使用压缩工具进一步压缩，进一步减少资源大小（推荐工具：TinyPNG）。
3、开发可在线程中对图片资源进行预加载，减少使用时一张张载入图片的等待时间。
4、开发可根据平台自行选择canvas、css等方式实现（不推荐使用JS定时器切换图片等性能较低的方法）。

3. bodymovin + Lottie

实现方法：
设计师在AE中使用插件导出Json文件（位图动画时一起导出图片文件）。开发使用lottie动画库重现动画。原理为关键帧动画。
优点：
1、比方法1、2性能好、占用内存小、文件小。
2、做非位图动画时只有一个Json文件。使用简单，开发成本最小好感度高。
3、 根据开发配置能获得一定的交互拓展性。
缺点：
1、插件不支持很多AE自带效果及函数效果，导出的时会丢失：
mask 混合效果不支持(少用mask,影响性能)；
Mattes只支持alpha matte(少用,影响性能)；
merge Path(合并路径) iOS都不支持；
图层效果和效果等都几乎不支持、文字iOS不支持应转为文字动画；
表达式不支持
2、导出时渐变色变黑白，需要手工改色值。晚上说与非英文环境有关，但系统及AE改为英文环境后还是没用。（手工修正色值教程点这里）
3、做位图动画时会导出图片资源，耗内存。
4、只能在iOS 8.0 以上，Android API 14 以上平台使用。
支持情况、插件及预览可在官方网站上查看：https://lottiefiles.com/
踩坑小记：在使用bodymovin导出位图动画时，素材尺寸及缩放的大小会影响最后导出文件的大小。为优化性能素材尺寸最好切的刚刚好。

4. svga

实现方法：
设计师在AE或Animation中使用插件导出svga文件。开发使用svga player播放器播放。 svga原理上是帧动画，经过优化性能更好。官方提供API能实现替换图层等交互效果。
优点：
1、比1、2方法性能好。
2、做位图动画比lottie好，导出的文件不包含图片资源。
3、开发可通官方API替换图层，实现一定交互效果。
缺点：
1、插件不支持很多AE自带效果及函数效果，导出的时会丢失。
2、目前很多炫酷的小礼物动画都是大佬摸索出来的位图动画。想要炫酷需要有一定的经验积累。（推荐一位svga大佬的技术博客http://blog.sina.com.cn/s/blog_be9ad3e30102yuxs.html）
支持情况、插件及预览可在官方网站上查看：http://svga.io/intro.html

结尾

由于开发后来点名用Lottie所以最终效果是用png位图+AE简单的动画+bodymovin导出完成这项带光效的动效设计任务的。但我个人认为在技术支持和社区繁荣程度上，svga更有优势。
个人认为简单的交互动画Lottie更适用。碰到要求光效、科技感、炫酷啥的需求，使用svga制作贴图动画更为合适。