在一个月黑风高的夜里，一位开发 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 插件。
为了让开发者可以轻易地接入动画，我们开源了 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 拿去祭天
网友评论