直播App中Android酷炫礼物动画实现方案（上篇）

在当下移动直播火爆的年代，如果你曾经使用过移动端直播应用，相信会被里面那令人惊叹的礼物动画效果迷住，比如像下面这样的效果。

从开发人员的角度来看，这样的效果虽然漂亮，实现但却是一大挑战，除了要考虑编码实现的效率、性能表现外，还要结合直播业务本身的特性等。

实现思路

首先，从实现思路方面入手，有以下几个方案作为考虑：

• 方案一：帧动画；

• 方案二：属性动画；

• 方案三：Gif或WebP；

• 方案四：实现一套播放动画的框架，客户端只需要继承进来，UI设计师按照约定的动画语法作图给开发人员即可；（原理类似SVG）

从实现性能、效率以及复用角度上来看，我们最终采用了最后一种方案。

• 方案一需要把图片带到安装包中，增大了安装包体积，而且直播应用中礼物种类很多，每个礼物都带一套帧动画进去，相当不科学。

• 方案二开发代价较大，每一套礼物动画基本都不一样，开发人员需要去细细调参，花在业务上编码的时间会变得非常有限，从代码复用率极低。

方案一、二除了以上提到的缺陷外，还有一个直播业务场景问题没有解决，就是当客户端发布之后，想要上架一些新设计的礼物就必须要让用户升级客户端，否则是无法体验到新上架的礼物。

方案三没有以上提到的业务问题，但在性能方面并不是最优选择。Gif图实质上就是把一帧帧的静态图片打包到一起，打成一个压缩包，但是由于Gif的压缩算法问题，实际上这个压缩包一点都不小，随便一个炫酷点的礼物效果都能弄个几兆到十几兆不等的文件出来，对于移动端来说，不论从下载和播放的性能表现上都差强人意。Gif图片能做的动画，WebP格式的图片同样可以实现，且WebP图片要比Gif图小很多，下图是同样效果用Gif和WebP的实现对比。

复杂WebP动图在编解码时，性能上表现得差强人意，而且虽然Android在4.0时开始支持WebP，但是要支持有损且带透明像素的WebP得到Android 4.2.1之后。Gif和WebP图片还有一个场景上的缺陷是，如果我要在播放到某一帧动画时，动态插入一些帧，实现起来难度较大，就像我们最近上线的产品Orangy里面的一个配对动画的效果，在爱心桃的中间某一帧插入两个配对者的头像。

前面铺垫了这么多，最终还是为了带出我们的主角，方案四。方案四是YY UED团队所研发的一套动画实现方案，作者给它起了名字叫SVGA，目前已经在YY系的很多产品线上良好运行着，下面简单的介绍它的优点：

• 对切图小哥和写Bug小哥友好，嗯，没错，再也不用互相伤害了。

• 高效，终端只需要继承这套方案框架，把动画实现交给动画设计师即可。

• 高性能，在实现酷炫动画的基础上，播放性能表现优于Gif和WebP。

• 动画文件小，同样的动画效果，SVGA文件要比Gif和WebP的文件小得多。

• 跨平台，支持Android、iOS、React Native、Web、还有不久前刚出来的微信小程序，不过小程序上的绘制功能很弱，效果有点感人。

• 开源，可以直接访问YY UED的Github获取框架源码 https://github.com/yyued

具体各种使用姿势，可以参考开源库中README上的说明，或者访问SVGA的官网 http://svga.io 。

实现原理

如果你熟悉SVG，那么理解起SVGA的实现原理并不会很困难，今天太晚了，下篇文章会继续聊，感兴趣的同学可以阅读源码先睹为快，在没有看代码之前，你会怎么觉得内部是怎么实现的呢？。哦，对了，这套代码的作者Pony（我经常叫他崔神）是个全栈大佬，之前写Java时觉得语法太繁琐，后面干脆用Kotlin重写了整套框架，就是这么任性，我时常问崔神需不需要端茶递水的小弟，结果他总是不缺…

引用

• https://isparta.github.io/compare-webp/index_a.html#12