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

引用

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 215,012评论 6 497
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,628评论 3 389
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 160,653评论 0 350
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,485评论 1 288
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,574评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,590评论 1 293
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,596评论 3 414
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,340评论 0 270
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,794评论 1 307
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,102评论 2 330
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,276评论 1 344
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,940评论 5 339
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,583评论 3 322
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,201评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,441评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,173评论 2 366
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,136评论 2 352