SVGA 背后的故事

在一个月黑风高的夜里,一位开发 Da Lao 在朋友圈吐槽『你们 UED 设计的动画,太炫了!我们实现不了……!』,接着UED 大当家与这位 Da Lao �谈了一整晚的人生。

第二天,大当家把 Pony 捉到了会议室,说道:『给你个死任务,把 UED 设计出来的动画,实现到《ME直播》中,不然就拿你去祭天』。

我当场就尿了啊…… 给你看看,UED 的动画是酱紫的。

angel.gif

这个动画,如果输出成 GIF 的话,要 3.0 M,尺寸是750 * 750。

Issue

那么,为什么上面那位 Da Lao 说,实现不了呢?如果使用 GIF 实现,有以下问题。

  • 动画文件太大(3M 的大小)
  • 播放资源占用高(内存占用 30M / CPU 占用50%)
  • 效果差(GIF 只支持 8 位颜色)

那么,使用 WebP 呢?嗯,使用 WebP 可以把动画文件压缩一半,但是,播放资源占用问题没有解决,这个才是最头疼的问题,想想,一个直播流已经占掉 20M 内存了,然后,一个礼物动画出来,应用直接挂掉了😅……

那么,使用 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 上的播放器的。

于是,干脆重写一个?然后 Pony 就用了两周的时间,把 SVGA Flash 转换器写出来了,再用两周时间,把 iOS 和 Android 的 Player 也写出来(当然,只是 Demo 阶段)。一个月后,拿出来,给 Da Lao 们欣赏欣赏,Da Lao 们都惊呆了……

这个方案,不仅资源占用很小很小(内存占用 8M 左右,CPU 占用 2%),文件大小也非常小(天使动画只需 295 K),效果还特码的很牛逼!

接着,就有了 SVGA 这个项目,并经过了一整年的迭代,在 YY 系的产品中有超过十多个产品的使用,应用范围涵盖 iOS / Android / Web / PC 客户端等。

对比

没有对比就没有伤害……

既然 Lottie 这么强大,我们就用 SVGA 来跟她比较一下吧。

CreateJS / Lottie

CreateJS / Lottie 实现的原理,都是将设计软件中的时间轴完整地导出来,包括里面的各种关键帧信息、矢量路径、样式等等。其中,最为关键的是『关键帧』!

由于使用的是关键帧动画描述,那么对应的 Player 就难免变得复杂起来。如果只是简单的一次线性方程,比如,物体从 A 点匀速移动至 B 点,还 OK。但是,当遇到二次线性方程、贝塞尔曲线方程这些高阶插值计算的时候,Player 就会很吃力!

另外一点值得注意的是,CreateJS 可以导出 Flash 动画,Lottie 可以导出 After Effects 动画,但是他们都不能导出对方的动画(每种设计工具的脚本都是不一致的)。这也意味着,你家的设计师只能使用其中一种设计工具。

再有一个坑,Lottie 在导出位图动画后,使用起来是相当麻烦的,你要先打包成 ZIP,再解压到本地目录,才能播放。

SVGA

SVGA 使用的是另外一套逻辑,SVGA 不关心关键帧,因为 SVGA 里面的每一帧都是关键帧!也就是说,SVGA 已经在导出动画的时候,把每一帧的信息都计算好了。这样,Player 也就不用关心插值计算的过程。

正因为如此,SVGA 可以同时支持 Flash 和 After Effects 的导出,只需要在各自转换器中计算差值就好了。

SVGA 在设计之初就支持位图元素,在 1.x 格式时使用 ZIP 进行打包,在 2.x 格式中,直接使用 ProtoBuf + Zlib 方式打包,作为开发者,完全不用关心应该怎样下载、解压、获取位图文件,直接把 svga 文件扔进去 Player 就可以了!

在功能上,SVGA 更贴合产品,SVGA 所提供的动态文本、动态图像功能都是其它库所不能提供的。

性能

我们最关心的永远是性能问题,SVGA 在设计之初就考虑到性能问题。

iOS

在 iOS 上,使用的是 CALayer 的方式进行渲染,整个渲染过程都处于 GPU 优化下,即使是 60 FPS 的动画播放起来,也是棒棒哒。

Android

在 Android 上的实现与 Lottie 类似,使用 ImageView + Drawable 方式进行渲染,这也意味着,SVGA 可以任意地嵌入到 UI 层级中,并且 Canvas 的性能也不差。

为什么不使用 SurfaceView?

这是一个惨痛的经历,当初 SVGA 的 Player 是使用 SurfaceView 的,但是,SurfaceView 在硬件加速的情况下,只能独立于 UI 层级(在最顶或者最底),使用软件方式渲染呢?那个性能,可以吓死你……

Web

在 Web 上,使用 Canvas 进行渲染,效果、性能也是棒棒哒,反正我在 Web 上没有看过到类似的库。

SVGA 生态

SVGA 提供一整套的动画解决方案,从设计、产品、开发三个环节保障动画可快速落地。

为了让设计师可以快速地导出动画,我们开发了 Flash / After Effects 插件。

http://svga.io/designer.html

为了让开发者可以轻易地接入动画,我们开源了 iOS / Android / Web 三个平台的源码。
https://github.com/yyued/SVGAPlayer-iOS
https://github.com/yyued/SVGAPlayer-Android
https://github.com/yyued/SVGAPlayer-Web

为了让所有人都可以快速获知动画是否正常,动画中的元素属性,我们开发了动画预览器。
http://svga.io/svga-preview.html

为了解决设计师、开发者的疑难问题,我们还提供 Q 群服务 576461005

所有的一切,都是为了文章最初的那句话,不要把 Pony 拿去祭天

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

推荐阅读更多精彩内容