直播间礼物动效实现方案.md

动画方案

简体中文 | English

概述

在目前的视频直播行业，礼物动画效果越来越酷炫。但由于动画方案和设备性能的原因，动画设计师的好多想法并没有得到很好的还原。YY的动画方案在近10年的时间也是经历了图片序列帧、SVGA、MP4、到现在的支持动态插入元素的YYEVA(YY Effect Video Animate)方案。目前已经基本能够实现设计师所见即所得，充分解放了设计师的想象力,同时能够在体积和性能上取得平衡。 在这篇文章中，我会从原理上去讲解目前市面上和YY的动画方案。也提供对比，以及分析各自的优缺点，方便开发者进行方案的选择。

动画原理

作者在这里把动画方案的实现原理分为三种。

• 第一种是纯面向过程的动画记录方式，目前市面上主流的有Airbnb 的Lottie和腾讯最近开源的PAG，原理是通过记录动画设计师制作动画的每个元素，还有每个元素的运动过程，然后开发者再还原这些元素的运动。这个方案的优点是文件体积小，能实现大部分基础特效和变换下的动画。缺点是不支持比较复杂的特效（如3D效果等），播放性能也比较差，因为记录过程就必然有一个还原动画的计算过程，在渲染的同时还需要计算每个元素的变化过程，对比其他方案就多了一项计算的性能损耗。 附Lottie动画示例：

• 第二种是半面向过程半结果的动画记录方式 目前市面上主流的方案有YY的SVGA和Y2A方案，原理是记录动画设计师制作动画时用到的每一个元素，然后记录元素在每一帧的特征（形状，大小，位置，alpha等）。SVGA的优点是能支持更复杂的动画，同时播放性能也比第一种方案好许多。缺点是体积会大一些，同时也不支持复杂的特效（如3D效果等）。为什么第二种方案相比第一种方案性能上比较好，也能够支持更复杂的动画呢，这是牺牲了一部分文件体积，从而减少了计算这一环节的因素。SVGA的文件经过zlib压缩和base64编码后，压缩率能达到85%~90%，所以体积上并不会比第一种方案多多少，相对而言是综合性能比较好的方案。

  举个例子，要记录一个人从广州开车到北京的动画过程。Lottie记录方式是：有一辆长宽高为xxx的汽车，30天（帧）匀速开到北京。SVGA的记录方式是：有一辆长宽高为xxx的汽车，第1天在广州，第2天在韶关，第3天在赣州…第30天在北京。还原动画的时候，Lottie的方案需要计算每1天（帧）汽车走到哪个位置了（通过广州和北京的距离，再除于总天数来计算当前所在城市），而SVGA因为已经记录好了每一帧的信息，省去了计算的过程。这个例子中SVGA体积会比Lottie文件大，但播放性能上会比较好。

  再举个例子，冬奥会的花样滑冰运动，Lottie记录的是运动员x左边飘移y米，转体四周半，落下后来个蟹步，然后再反向转体四周半。要还原这个动画，Lottie的计算过程就相当复杂了，要通过转体几周来计算每一帧运动员的特征（形状，大小，位置等）再渲染，播放这种复杂动画的时候就会卡，因为计算量太大了。而SVGA记录的还是运动员x，第1帧特征（形状，大小，位置等），第2帧特征......第n帧特征。因为记录的是运动员每一帧的特征（形状，大小，位置等），相比第一个例子并没有变复杂，省去了这些复杂的计算，就能够更顺畅的播放复杂的动画。

• 第三种是记录结果方式，目前主要有PNG序列图和带透明通道的MP4方案。原理是记录每一帧每个像素点的像素值来渲染，优点是所见即所得，充分解放设计师的思想，能够支持所有设计师能设计出来的动画，包括3D动效等。其中PNG序列图由于体积大，性能较差等原因基本已很少开发者使用，而带透明通道的MP4能够在体积和性能、效果上取得较好的平衡，特别是h265编码的MP4体积更小。这也是目前YY播放复杂动效采用的技术方案，YY自研的YYEVA支持通过AE插件一键导出h265编码的视频，并能够动态插入元素，支持播放时动态替换元素，有一套完整的工具链，涵盖了设计侧和开发侧。

  这种方案体积上一般会比前两种方案大一些，但使用h265编码就能够在牺牲一点性能情况下减少体积，对于中高端机型是很值得的。MP4方案主要的难点在于怎么样支持动态插入或替换元素，因为MP4只记录了结果，设计师设计的动效有哪些元素和每个元素的运动轨迹都没有记录下来，就很难去替换具体的元素。YY的方案是从设计师设计动画时着手，让设计师在设计动效时指定哪些元素是需要动态替换的。因为设计师目前主要使用AE进行动效设计，我们就通过AE插件，记录设计师指定的需要动态替换的元素，然后将这些信息存入MP4文件的Metadata数据。客户端在播放时取出Metadata信息，再根据这些信息动态替换指定位置的元素并还原元素的运动过程。大体原理是这样，整体方案细讲起来需要比较长的篇幅，我们会在另一篇文章中详细的给大家分析我们的YYEVA方案。

总结

三种方案依次能实现的动效复杂度是越来越高的。

• 第一种方案 支持一般的动效，比如UI动画，场景切换动效和一些进场、得分等动效。
• 第二种方案能支持第一种能支持的所有动效，且能够支持更复杂的动效，例如复杂的礼物动效，酷炫的坐骑动画等。
• 第三种方案能支持所有的动效，只要设计师能设计出来的动效都支持。在体积上，也是依次递增的，第一种方案体积最小。但是在性能上刚好反过来，第一种方案性能最差，CPU和GPU占用较高。

所以具体使用哪种方案，要看自己的应用场景，如果是简单的动效多，可以考虑采用Lottie和PAG方案，如果是比较复杂的礼物动效，建议是采用SVGA方案或者MP4方案。

作者在这里提到的方案，包括Lottie、PAG、SVGA和YYEVA，都支持设计师预览效果，在客户端播放器还原设计出来的效果，所见即所得，不需要额外开发。比起传统的设计师出效果图，开发自己写代码去还原动态效果的方案，效率是非常高的，不需要开发和设计重复对齐返工。为什么能做到完整的还原设计师的效果，这里要提到一个PC时代动画界的王者Flash，不管是Lottie、SVGA、PAG还是YYEVA，这些方案的作者都有Flash相关的设计和开发经验。因为Flash是为数不多既能用来设计动画，又能开发应用或游戏的软件，Flash动画设计师和Flash程序员使用的都可以是Flash这个软件，所以产生了一些既是设计师又是开发者的角色，转行移动端开发以后，创造了这些移动端的动画方案，这些方案的原理都与Flash有共通之处。

看到这里，可能读者会问，那我应该怎么进行方案选型呢。我的建议是简单的动效（没有粒子，复杂遮罩，3D等效果）用SVGA方案来实现，复杂的动效采用YYEVA的方案来实现，目前YY也正是采用这种方案，SVGA和YYEVA搭配使用，不管在性能和效果上都能够达到要求。这个方案还有个好处，对于设计师而言，SVGA和YYEVA都有一套完整的工具链，都可以直接预览效果，通过AE插件可以一键导出SVGA文件和MP4文件，YYEVA支持自己设置编码参数以及使用h264或h265编码，可以在性能和体积上取得更好的平衡。