VAP高性能动画组件

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

• 相比 Webp、Apng 动图方案，具有高压缩率（素材更小）、硬件解码（解码更快）的优点
• 相比 Lottie，能实现更复杂的动画效果（比如粒子特效）
• 还能在动画中融入自定义的属性（比如用户名称, 头像）

项目背景

企鹅电竞是个直播平台，需要在直播间里显示酷炫的送礼动画。

动画越酷炫，对素材大小与解码性能要求越高，调研了很多方案，先给对比表：

• 测试参数：
  • 手机: 小米mix3
  • 素材: 736 × 576 80帧
  • Apng: 75质量; Webp: 75质量; VAP: 2000码率

调研方案：

1. 矢量动画方案（代表 Lottie）：Lottie 矢量动画压缩率很高，但因为无法显示特殊效果（比如粒子特效），所以此方案不适合；
2. 动图方案（代表 GIF, Apng, Webp）:
   • GIF：只支持 8 位颜色，颜色丢失严重，解码性能低，无法满足特效效果；
   • Apng, Webp：能够满足特效效果，但文件大，软解效率低（低端的手机上，比如当年的红米1，解码过程甚至能导致整个直播间卡顿），这些问题很难接受；
3. 视频方案（代表 mp4）: 采用 H264 编码，相比动图方案，有很高的压缩率，硬件解码效率很高，缺点很明显，无法支持透明背景；

调研后发现，要么特效表现无法达到要求（Lottie, GIF），要么文件太大而且还是软解（Webp, Apng），要么不支持透明度（mp4），这些方案都不能满足我们的需求，于是高性能动画组件 VAP 诞生。

平台支持

支持：Android, iOS, web. 接入说明在对应平台目录中

为大家更方便地使用组件，还有配套的素材制作工具 tool (工具目前只支持 Mac 版本)