腾讯开源Kotlin高性能特效动画组件原来这么强大！

查看效果屏幕：

1。 VAP

VAP（视频动画播放器）是企鹅电竞开发的用于播放精彩动画的实现方案。

• 与Webp相比，Apng动画方案具有压缩比高（镜头更小）和硬件解码（解码速度更快）的优势。

• 与Lottie相比，可以实现更复杂的动画效果（例如粒子效果）。 VAP 还可以将自定义属性（例如用户名、头像）集成到动画中

2。项目背景

企鹅电竞是一个直播平台，需要在直播间展示精彩的礼物动画。

越酷的动画，对素材的大小和解码性能的要求就越高。我们探索了很多解决方案。先来个对比表：

测试参数：

• 材质：小米mix3

• 材质：736×576 80帧

• Apng：75品质； Webp：75 质量； VAP：2000码率

研究计划：

1.矢量动画计划（代表Lottie）：Lottie矢量动画的压缩比很高，但由于无法显示特效（如粒子效果） ，该解不适合；

2.GIF解决方案（代表GIF、Apng、Webp）：

• GIF：仅支持8位颜色，颜色消失。说实话，解码能力弱，特效补不上去；

• Confutse、Webp：可以响应特效，但文件大，软解码效率低（在廉价手机中，比如当年的红米1，解码过程甚至会导致整个直播房间卡住了），这些问题很难接受；

3. 视频方案（播放mp4）：使用H264编码时，相比动画方案，其压缩比高，硬件解码能力很高，缺点很明显，无法支持透明背景；

经过研究，发现要么是特效表现不符合要求（Lottie、GIF）要么文件太大太软（Webp、Apng）要么不支持透明（mp4），这些解决方案不能满足我们的需求，需要一个高性能的动画组件VAP。

3。实现原理

格式选择

mp4视频方案无论是效果、大小还是解码性能都是最好的，但H264记录的是YUV数据，不是透明通道。 VAP解决方案基于mp4，解决了视频的透明问题，使其具有更好的压缩效率和更好的解码能力。

视频透明实现

H264解码后的每一帧数据为YUV。转换成RGB后，就没有Alpha通道了。我们可以在视频中另开一个区域，将Alpha值保存在RGB通道中。最后使用 OpenGL 将这些数据合成为 ARGB 图像（具有透明通道）。

例如，解码器解码一帧原始图像后，合成原理如下：

每一帧都做同样的事情，即得到透明视频。实际视频如下： 在原始视频中，黑白区域包含alpha数据。最新版本的VAP实现了可变大小的Alpha区域。通过减小Alpha区域的大小，可以在不影响最终显示功率的情况下，有效降低视频分辨率，提高模型兼容性，为VAP的融合特性留出额外的空间。的管辖范围内。

动画配置信息

在播放动画时，需要一些配置信息来帮助播放（如Alpha区域配置，包括融合动画信息），配置为JSON格式。为了让组件更容易使用，所有相关文件都合并为mp4文件，因此只需要一个mp4文件即可播放动画。

Mp4的组织方式与JSON的键值组织方式非常相似。它的名字叫BOX。我们创建一个新的BOX（vapc VAP Config）。 JSON 内容放置在此框中。请在玩之前阅读此内容。然后播放BOX（ps：mp4规范规定，如果无法识别BOX，则自动跳过，不影响正常的mp4播放过程）。

VAP Fusion Animation

VAP还支持将用户名和头像等自定义属性集成到动画中。我们称之为VAP融合动画。

您无法直接向视频内容添加属性。我们只能通过裁剪属性图像来欺骗用户的眼睛，使其出现在视频内容中，达到最终的融合效果（效果如文章开头所示），才能拯救地球。

要实现属性图像处理，需要引入“mask”材质，利用mask和属性图像进行Porter-Duff运算，然后得到想要的形状

然后将结果粘贴到对应的坐标点视频，即可达到最终的融合效果。

每一帧视频内容都记录着海量镜头。先前通过减去 Alpha 区域来使用释放的区域。

支撑工具

让大家更轻松地使用组件和支撑材料的生产工具

项目地址

开源代码地址：https://github.com/Tencent/vap