高性能动画组件VAP开源啦！

╰半夏微凉° 2022-12-04 10:58 753阅读 0赞

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

*  相比Webp,Apng动图方案，具有高压缩率(素材更小)、硬件解码(解码更快)的优点
 *  相比Lottie，能实现更复杂的动画效果(比如粒子特效)

特效展示

![format_png][]

VAP还能在动画中融入自定义的属性（比如用户名称, 头像）

![format_png 1][]

# **支持平台** #

Android, iOS, web

# **性能简述** #

![format_png 2][]

VAP在文件大小与解码性能上有很大的优势，实验参数请参考github:https://github.com/Tencent/vap/Introduction.md

#     #

# **原理说明** #

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

###     ###

### 1. 视频透明度实现 ###

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

### 2. 动画配置信息 ###

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

3. 融合动画

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

https://github.com/Tencent/vap

（点击文末阅读原文直接访问）

请给项目 一个 Star !

欢迎提出你的 issue 和 PR！

国内镜像地址：

https://git.code.tencent.com/Tencent\_Open\_Source/vap

（登录后才能访问公开项目）

![format_png 3][]

腾讯工蜂源码系统为开源开发者提供完整、最新的腾讯开源项目国内镜像

![format_png 4][]

[format_png]: /images/20221123/c9e26ca3d4c7452fb9befbbe98597e73.png
[format_png 1]: /images/20221123/693bd061c2784e27883e2024f3916b95.png
[format_png 2]: /images/20221123/c0892041c03843c189b50420c2b5c77c.png
[format_png 3]: /images/20221123/fd03d3ada9984975b7a16a150d249971.png
[format_png 4]: /images/20221123/21ce498eb6a94058b428b6448d59b68b.png

发表评论取消回复

表情：

评论列表（有 0 条评论，753人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue过渡动画，组件动画，元素动画（vue2元素、组件过渡动画）

在 CSS 中，你需要定义以 name 属性值为前缀的六个类名来控制过渡的不同阶段。例如，如果 name="fade"，则需要定义以下类：.fade-enter-acti...

ゝ一纸荒年。/ 2024年04月22日 22:30/ 0 赞/ 191 阅读

相关分布式系统开发脚手架，开源啦

spring-cloud-plus 项目地址： [https://gitee.com/gourd-hu/spring-cloud-plus][https_gitee.

淩亂°似流年/ 2023年07月10日 15:45/ 0 赞/ 33 阅读

相关高性能动画组件VAP开源啦！

VAP（Video Animation Player）是企鹅电竞开发，用于播放酷炫动画的实现方案。相比Webp,Apng动图方案，具有高压缩率(素材更小)、硬件解码(

╰半夏微凉°/ 2022年12月04日 10:58/ 0 赞/ 754 阅读

相关 GPU 高性能推理加速框架Forward开源啦

项目简介 Forward 是一款腾讯平台和内容事业群（PCG）研发的 GPU 高性能推理加速框架。它直接加载主流框架模型（Tensorflow / PyTorc

ゞ浴缸里的玫瑰/ 2022年10月22日 10:57/ 0 赞/ 747 阅读

相关高性能动画“box-shadow”属性

本文从《[How to animate “box-shadow” with silky smooth performance][How to animate _box-shad

叁歲伎倆/ 2022年08月09日 14:59/ 0 赞/ 207 阅读

相关 Javascript高性能动画与页面渲染

No setTimeout, No setInterval 如果你不得不使用setTimeout或者setInterval来实现动画，那么原因只能是你需要精确的控制动画。

以你之姓@/ 2022年06月10日 07:44/ 0 赞/ 293 阅读

相关腾讯高性能图片框架 LKImageKit 开源啦！

<table style="border-spacing:0px;margin:10px 0px;color:rgb(68,68,68);font-family:helveti

以你之姓@/ 2022年05月28日 23:09/ 0 赞/ 379 阅读

相关高性能动画“box-shadow”属性

本文从《[How to animate “box-shadow” with silky smooth performance][How to animate _box-shad

布满荆棘的人生/ 2022年05月26日 08:40/ 0 赞/ 200 阅读

相关 .NET开源组件

[这些.NET开源项目你知道吗？让.NET开源来得更加猛烈些吧!（第二辑）][.NET_.NET] 在上个月发表的一篇文章：[这些.NET开源项目你知道吗？让.N

左手的ㄟ右手/ 2022年03月09日 03:18/ 0 赞/ 364 阅读

相关 rn 动画组件

1、设置动画属性对象可以通过this设置全局对象 this.xx=new Animated.Value(值); 2、将动画属性

左手的ㄟ右手/ 2021年07月25日 00:34/ 0 赞/ 809 阅读