一种完美的动画实现方案

0.367字数 885阅读 5417

动画,对于任何一个前端工程师来说,都是一项可敬可畏的工作。好的动画,可以让应用、网站增色不少。然而,要将动画一丝不差地实现在对应平台上,并不是一件容易的事情。

在实现动画前,动画设计师会给出动画源文件,但是要实现这些动画,要么选择性能不佳的序列帧(内存、CPU占用大),要么则选择 Hard-Code 的方式实现,这些代码一般来说要几千行,并且难以维护。

因此,我们所遇到的情况就是,几乎每个应用都在削减动效……

作为直播应用的前端,当然也遇到这种问题,并且,这种问题同时影响着用户体验与营收。我们遇到的首先是礼物动画,礼物动画的尺寸是 500px * 500px,15 FPS 持续 4 秒。以往,使用帧动画的方式播放此类动画,内存、CPU开销居高不下。而使用代码的形式实现动画,几乎是不可能的事情。(点此查看动画 Sample

于是,一年前,YY UED 团队决定改变这种现状。

现在,我们自豪地将 SVGA 推荐给大家,SVGA 正是解决以上问题的终极方案。SVGAConverter 可以将 Flash 以及 After Effects 动画导出成 .SVGA 文件(实际上是 ZIP 包),供 SVGAPlayer 在各平台播放,SVGAPlayer 支持在 iOS / Android / Web / ReactNative / LayaBox 等平台、游戏引擎播放。

SVGA 做的事情,实际上,非常简单,Converter 会负责从 Flash 或 AE 源文件中提取所有动画元素(位图、矢量),并将其在时间轴中的每帧表现(位移、缩放、旋转、透明度)导出。 Player 会负责将这些信息还原至画布上。

因此,你会发现,SVGA既有序列帧的特点,又有元素动画的特点。Player 逻辑极度简单,她只负责粗暴地将每一个元素,丝毫不差地渲染到屏幕上,而无须任何插值计算。(我们认为,任何插件计算的逻辑都是复杂的)

也因此,你会发现,SVGA 不同于 Lottie,Lottie 需要在 Player 一层完整地将 After Effects 所有逻辑实现,而 SVGA 则将这些逻辑免去。也因此,SVGA 可以同时支持 Flash,我们相信 Flash 以及其继承者 Animate CC 仍然有强大的生命力,以及完善的设计生态。

SVGA 最初的目标是为降低序列帧动画开销而生的,因此,性能问题一直是 SVGA 关注的焦点。如果你可以深入地探究 SVGA 的实现方式,你会发现,SVGA 实质上做了一件非常重要的事情。她会在动画播放前,一次性地上传所有纹理到 GPU,接着,在播放的过程中,这些纹理会被重复使用。CPU 与 GPU 交换的次数大大减少,同时,纹理的数目也在可控范围。内存、CPU、GPU 占用能达到最优状态。

如果你现在还在犹豫是否要使用 SVGA,不妨先打开 SVGA 网站查看 Sample。

推荐阅读更多精彩内容