SVGA 背后的故事

96
PonyCui
1.0 2017.10.26 16:35* 字数 1981

在一个月黑风高的夜里,一位开发 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 拿去祭天

设计模式
Web note ad 1