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

原理说明：

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

优势：

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

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

3、视频透明度实现

4、动画配置信息与融合动画

工具的安装：

vapxTool是专门为vap组件打造的素材生成工具，目前只支持mac版本

下载地址：https://github.com/Tencent/vap

或者到腾讯开源社区：https://git.code.tencent.com/Tencent_Open_Source/vap/tree/master/tool/vapxTool

下载之后文件夹里面包含给开发工程师的ios、安卓和web的接入说明文档和tool工具，设计师只需要安装tool工具即可

安装完成之后，到启动台看到一个灯泡图标的工具，就是我们需要的vapxTool

下面将用实操教大家如何使用

1、AE文件中导出序列帧，如果带有透明像素，注意勾选透明背景

输出模块设置中，一定要选择RGB+Alpha

2、导出之后，这里需要注意！！！视频帧 - ！！！！重要！！！！特效的帧素材，命名必须以固定长度的数字递增例如（000.png, 001.png, ...），否则无法导入视频帧！mac具有批量修改文件名的功能，非常方便，如下所示：

直接将前面的中文和下划线替换成空，如下：

替换完成，如图：

3、打开专门为vap组件打造的素材生成工具--vapxTool，界面基本参数保持默认，fps可修改为24，点击上传文件，修改输出目录

4、点击生成，等待一段时间就会生成一个vap.mp4和一个json文件，mp4文件即为vap文件，使用这个文件即可；vapc.json文件是给前端用的，实际上就是已经编码在mp4的vap配置信息

将文件打包交给开发，设计师的工作到这里已经完成！

Powered by Froala Editor