VAP高性能动画组件

联合创作 · 2023-09-27 05:11

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

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

项目背景

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

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

- 文件大小 解码方式 特效支持
Lottie 无法导出 软解 无粒子特效
GIF 4.6M 软解 只支持8位色彩
Apng 10.6M 软解 全支持
Webp 9.2M 软解 全支持
mp4 1.5M 硬解 无透明背景
VAP 1.5M 硬解 全支持
  • 测试参数:
    • 手机: 小米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 诞生。

平台支持

支持:AndroidiOSweb. 接入说明在对应平台目录中

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

 
浏览 13
点赞
评论
收藏
分享

手机扫一扫分享

编辑 分享
举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

编辑 分享
举报