直播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重写了整套框架,就是这么任性,我时常问崔神需不需要端茶递水的小弟,结果他总是不缺…

引用

转载请注明出处,喜欢我的文章可以搜索并关注我的微信公众号:技术视界(ID:clock_life)

推荐文章