直播动画框架探索

目录

直播动画框架探索

方案对比

动画库对比

---

直播动画框架探索

方案对比

方案	优点	缺点
帧动画OpenGL	实现简单	播放图片资源占用高；
属性动画	资源占用小	1. 播放图片资源占用高； 2. 实现难度大，实现效率低；
GIF	实现简单	1. 播放图片资源占用高； 2. 资源文件包比较大； 3. 效果不是很好(只支持8位颜色)
webp	1. 实现简单； 2. 相对GIF，资源文件包变小；	1. 播放图片资源占用高
动画库	1. 一套引擎，三端公用； 2. 一套协议，三端各自实现

 

动画库对比

动画库	Lottie	SVGA
支持平台	Android/iOS/Web	Android/iOS/Web
设计工具支持	After Effects	AE & Flash
导出工具	插件	插件
资源包大小zip	2.6M	767k
优点	三端可用 自行缓存 不需要二次开发	资源包小 测试工具齐全 三端可用 Protobuf 序列化结构数据格式，传递效率比xml,json 更高
缺点	资源包相较SVGA而言会大一倍多	每个礼物播放时都去重新解压，需要自行实现一套缓存策略 svga 用zlib打包，不方便解压和追踪包内容。
实现方式	一层一层 完全按照设计工具的设计思路来进行还原，将动画脚本导出并解析。动画脚本非常的轻量。 将所有的动画拆成多个层级,每个层级layer都有一个动画配置，播放时解析多个layer的配置，并给每个layer做相应的动画。也达到了图片可以复用。当需要解析高阶插值（二次线性方程，贝塞尔曲线方程）时，性能相对而言差一点。	一帧一帧 通过设置帧率，来生成一个配置文件，使得每一帧都有一个配置，每一帧都是关键帧，通过帧率去刷每一帧的画面，这个思路跟gif很像，但是通过配置使得动画过程中图片都可以得到复用。性能就提升上来了。并且不用解析高阶插值（二次线性方程，贝塞尔曲线方程）
官网	地址	地址

结论：

直播场景下（动画时间短，播放频率高），主要考虑资源占用：
Lottle 因为要在绘制时间计算一些高阶曲线导致绘制效率比较低，并且动画资源文件比较大；
SVGA动画资源更小，由于是一帧一帧绘制，并且复用图片，所以在直播场景下资源占用更加小；

最终选用SVGA。