直播App中Android酷炫礼物动画实现方案（下篇）：SVGA由来与Lottie的对比

这个动画，如果输出成GIF的话，要3MB，尺寸是750*750。在上一篇文章中已经介绍过几种被否掉的方法，这里再稍作补充说明，如果使用GIF实现，有以下问题。

• 动画文件太大（4MB的大小）

• 播放资源占用高（测试机子内存占用约30MB/CPU占用约50%）

• 效果差（GIF只支持8位）

使用WebP呢？嗯，使用WebP可以把动画文件大小压缩到一半，但是，播放资源占用问题没有解决，这依然是头疼的问题，想想，一个视频直播流已经占用了系统给进程分配的大量内存，然后直播间里面可能成千上万甚至更大体量的人同时在线，观众们一个个赠送礼物的动画出来，应用直接给搞挂掉了……

如果使用A-PNG呢？使用A-PNG可以完美地解决效果差的问题，因为PNG支持32位颜色啊，但是，同样的天使动画，大小可以达到9M，播放资源占用更更更高！

探索

早在2015年，Adobe就已经把CreateJS收归旗下，并且可以完美地将Flash动画导出至Web中。也正是同一个时期，BodyMovin出现了，BodyMovin可以将另一个Adobe的软件After Effects所设计的动画完美地导出至Web中。这两者的出现，是我们开发SVGA灵感的源泉。

具体的思路是，将动画脚本导出，再将动画元素（位图）导出，然后在对应的客户端，重新拼合这些位图。这样做的好处很明显，元素是有限的，动画脚本也非常轻量，我们只需要一次性地把元素还原出来就可以了。

相比序列帧，这种方案得到的动画文件非常小，播放资源占用也非常小，效果却相当好（因为使用PNG支持32位颜色）。

实现

在2016年的时候，Lottie还没开源，并且BodyMovin的文档也相当欠缺，我们是不可能重新实现一个BodyMovin在iOS/Android上的播放器的。