复杂动画方案对比

近期项目出于项目的包体大小缩减和复杂动画的流畅性与还原度考虑，将序列帧动画根据在不同动画库的表现进行替换，主要考虑因素是动画资源大小、动画的还原度以及动画在部分低端机型的表现。

图片来源于Lottie官网

动画库	SVGA	Lottie	Spine
支持平台	iOS/Android/Web	iOS/Android/Web	iOS/Android/Web
设计工具支持	AE & Flash	AE	AE
功能边界	部分	大部分	大部分
设计成本	插件	插件	单独的设计工具

SVGA

设计师插件链接：
https://svga.io/intro.html
开发者集成链接：
https://github.com/yyued/SVGAPlayer-iOS
https://github.com/yyued/SVGAPlayer-Android
https://github.com/yyued/SVGAPlayer-Web
在线预览链接：
http://svga.io/svga-preview.html

动画原理：

• 逐帧渲染，每一帧均为关键帧，只需渲染每个元素无需插值计算
• 播放前一次性上传纹理到 GPU，并在动画过程中复用纹理

设计成本

• 不支持复杂的矢量形状图层
• AE自带的渐变、生成、描边、擦除等
• 对图片动画更加友好

开发成本

• 文件资源较小
• 三端通用
• 每个动画播放都会重新解压，需要重新设计一套缓存策略（尤其在列表中使用）
• zlib打包，不方便解压和追踪包内容

Lottie

设计师插件链接：
https://github.com/airbnb/lottie-web
开发者集成链接:
https://github.com/airbnb/lottie-ios
https://github.com/airbnb/lottie-android
https://github.com/airbnb/lottie-web

动画原理：

• 逐层渲染，完全按照设计工具的设计思路还原
• 播放解析多个图层配置并添加相应动画，并在动画过程中复用图层
• 当需要解析高阶插值，性能相对差一些

设计成本

• 基本满足所有种类的矢量动画和图片动画

开发成本

• 三端通用
• 缓存策略可以满足业务需求，不需要二次开发
• 文件资源相对较大
• 图片需要重命名 & 偶先播不出来动效

Spine

设计师链接：
http://zh.esotericsoftware.com/spine-quickstart
开发者集成链接:
http://zh.esotericsoftware.com/spine-runtimes

动画原理：

• 通过控制骨骼的动作与贴图的方式还原动画，使用差值算法计算中间帧
• 动画之间可以进行混合（如一个角色可以开枪射击，同时也可以走、跑、跳或者游泳）

设计成本

• 学习成本相对较大

开发成本

• 三端通用
• 文件资源较小，复用率高
• 动画性能较好，可组合动画
• 研发成本相对比较大

参考资料：
SVGA官方文档
Lottie官方文档
Spine官方文档