直播礼物类型详解

支持平台Android, iOS, web

性能对比

GIF逐渐被舍弃。我们一般不推荐使用gif格式，同样的特效gif文件大小和运行内存都比较大，而且还有颗粒感。

GIF格式的名称是Graphics Interchange Format的缩写，是在1987年由Compu Serve公司为了填补跨平台图像格式的空白而发展起来的。GIF可以被PC和Mactiontosh等多种平台上被支持。最古老的动画格式，具有较高兼容性和体积最小的优点，但缺点也是明显的仅最高支持256种颜色，随着动画时长的增加也会使文件体积增大和大量占用手机内存。

Apng动图

APNG（Animated Portable Network Graphics）诞生于 2004 年，是一个基于 png 的位图动画格式，扩展方法类似主要用于网页的 GIF 89a，仍对传统 PNG 保留向下兼容，2017 年主流浏览器几乎都已经支持 APNG。他在目前主流的所有浏览器上都可以完美支持，在移动的设备上通过一些代码框架也可以完美支持，他相比 GIF 支持的色彩范围更广，更清晰，并且占用更低的内存，支持透明通道，有非常多的优势。

Webp动图

WEBP 是由 Google 推由，他目前也基本兼容所有的主流浏览器，相同的效果，webp 格式要比 png 格式小出来大概一半的大小，同时他也兼容所有的安卓设备，像一些 ios 设备需要通过一定的方式才可以支持，不过相比来说各方面的表现都是非常优秀的。它的实现原理是把所有的序列帧合成一个webp文件，所以它的体积是序列帧*帧数。

Lottie

Lottie 由 Airbnb 推出，并且迅速在国内外各种大小厂快速推广开来，目前已经是一个非常普遍常用的格式（支付宝的五福活动就是通用这种实现方案来完成各种动画效果）他在 AE 中的插件叫 Bodymovin，他的原理是把我们的各种矢量元素以及位图图层以及他们的效果关键节点打包的形式行成一个 json 格式的文行。但缺点也明显，它不支持更多的AE插件，他对缓动曲线的解析会占用非常多的内存；第二点是各平台效果的支持都不是很稳定，很多时候都容易出 Bug。

链接: Lottie

https://github.com/airbnb/

SVGA

针对 Lottie 对缓动曲线解析差带来的性能问题和稳定性问题，我们会有第二种备选方案是 SVGA，不管是导出之后的内存占用，还是在各个端的表现稳定性都会好很多。但是他的内存占用会比 Lottie 稍高，并且支持的特性也会比 Lottie 少一些。仅支持AE的五大属性（锚点、位移、缩放、透明度、旋转）。svga也可以用序列帧来实现礼物动画效果，效果就跟webp的其实是一样的，因为没有发挥出它的优势，体积大也该大，该占内存也会占内存。不过svga在实现一些小动画，小交互还是用得挺广泛的。

链接: svga

https://github.com/svga

MP4

终于讲到了我们的主角mp4了，或许大家疑惑了，直播间的礼物动效都是得透明的啊，mp4又不支持透明，能支持透明的mov格式又不太可能用于手机直播间。我们先了解下透明是什么？图像的透明使用 Alpha 通道表示，即 RGBA 里的 A，该通道是一个 8 位灰度通道，由 256 级灰度来记录图像中的透明信息。说白了透明和 RGB 一样都是颜色信息，虽然 MP4 不支持透明通道，只要想办法给它展示出来就好了吧！还是 canvas 技术，只要我们可以用 canvas 把透明视频画出来就可以了。

VAP（趋势）

VAP（Video Animation Player）是企鹅电竞开发，用于播放酷炫动画的实现方案。

相比Webp,Apng动图方案，具有高压缩率(素材更小)、硬件解码(解码更快)的优点

相比Lottie，能实现更复杂的动画效果(比如粒子特效)

VAP在文件大小与解码性能上有很大的优势

原理说明

mp4视频方案无论从效果、大小与解码性能上都是最优的，但H264的里存的是YUV数据，并没有带透明通道。VAP方案基于mp4，解决视频里透明度的问题，这样就能兼具更好的压缩效率，与更好的解码性能。

1. 视频透明度实现

H264解码出来每一帧的数据是YUV，转换为RGB后是不带Alpha通道的，而我们可以在视频中额外开辟一块区域，在RGB通道里存储Alpha的值，最后利用OpenGL将这些数据合成为ARGB图像（带透明通道的图像）。

2. 动画配置信息

动画播放过程中，需要一些配置信息协助播放（比如Alpha区域声明，包括融合动画信息），配置是JSON格式。为了组件更方便使用，所有相关文件都合并到mp4文件里，这样播放动画只需要一个mp4文件即可。

3. 融合动画

VAP还支持在动画中融入自定义属性，比如用户名称, 头像。我们称其为VAP融合动画。视频内容无法直接实现属性的插入，只能曲线救国，通过对图片进行修剪，欺骗用户的眼睛，让其看起来像是在视频内容里，实现最终的融合效果。

链接:

VAP格式：https://github.com/Tencent/vap/tree/master/tool.

关于 WebP 格式： https://developers.google.com/speed/webp
WebP 引文： https://caniuse.com/webp
APNG 制作： https://ezgif.com/apng-maker
APNG 引用： https://juejin.cn/post/6857678436304388104
APNG 对比链接： http://littlesvr.ca/apng/gif_apng_webp3.html
Lottie 参考： https://cloud.tencent.com/developer/article/1005896
VAP 地址： https://github.com/Tencent/vap/blob/master/Introduction.md
PAG 相关阅读推荐：https://mp.weixin.qq.com/s/a8-yOp8h5LiFGKSdLE_toA
PAG 官网： https://pag.io/docs/pag-export.html