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

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

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

特效展示

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

支持平台

Android, iOS, web

性能简述

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

(登录后才能访问公开项目)

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

高性能动画组件VAP开源啦!相关推荐

  1. 腾讯自主研发动画组件PAG开源

    PAG (Portable Animated Graphics) 是一套完整的动画工作流.它提供从AE导出插件,到桌面预览工具,再到各端的跨平台渲染SDK,助力于将AE动画方便快捷的应用于各平台终端. ...

  2. 腾讯开源 Kotlin 高性能特效动画组件!

    点击上方"Github中文社区",关注 看遍Github好玩的项目 大家好,我是huer! 有人留言咨询有没有kotlin相关的开源,今天给大家推荐一款,先看一下效果展示: 1. ...

  3. 深度|从Go高性能日志库zap看如何实现高性能Go组件

    导语:zap是uber开源的Go高性能日志库.本文作者深入分析了zap的架构设计和具体实现,揭示了zap高效的原因.并且对如何构建高性能Go语言库给出自己的建议. 作者简介:李子昂,美图公司架构平台系 ...

  4. 【Flutter】Animation 动画 ( AnimatedWidget 动画使用流程 | 创建动画控制器 | 创建动画 | 创建 AnimatedWidget 动画组件 | 动画运行 )

    文章目录 ◯.AnimatedWidget 组件引入 一.创建 AnimatedWidget 动画组件 二.创建动画控制器 三.创建动画 四.动画运行 五.完整代码示例 六.相关资源 Animated ...

  5. Vue常用的组件库大全【前端工程师必备】【实时更新】【移动端、PC端(web端)、数据可视化组件库(数据大屏) 、动画组件库、3D组件库】

    Vue常用的组件库大全[前端工程师必备] (一)移动端 常用组件库 1)Vant ui 2)Cube UI 3)VUX 4) NuTUI 5)Mint ui 6)Varlet UI 7)OnsenUI ...

  6. 深度 | 从Go高性能日志库zap看如何实现高性能Go组件

    导语:zap是uber开源的Go高性能日志库.本文作者深入分析了zap的架构设计和具体实现,揭示了zap高效的原因.并且对如何构建高性能Go语言库给出自己的建议. 作者简介:李子昂,美图公司架构平台系 ...

  7. 腾讯PAG动画组件技术,8K内容生产和传输应用实践,xR虚拟拍摄技术探索,影视生产与互联网音视频...

    腾讯PAG动画组件技术 Topic <动效素材极速交付:腾讯PAG动画组件技术揭秘> 陈仁健  腾讯 OVBU 计算内容中心副总监 音视频产品中的动效素材需求是源源不断的,例如贴纸花字,转 ...

  8. Flutter 动画全解析(动画四要素、动画组件、隐式动画组件原理等)

    本文通过拆解 Flutter 中动画的实现方式以及原理来介绍动画实现的整个过程. 1. 动画四要素 动画在各个平台的实现原理都基本相同,是在一段时间内一系列连续变化画面的帧构成的.在 Flutter ...

  9. 视图属性+对象动画组件ViewPropertyObjectAnimator

    视图属性+对象动画组件ViewPropertyObjectAnimator ViewPropertyObjectAnmator组件是一款对象动画(ObjectAnimator)封装组件.它将视图属性动 ...

最新文章

  1. 安卓关于fragment切换后继续运行的问题!
  2. 汇编语言串指令经典题目
  3. mysql-5.7.37-winx64解压版安装超详细图文教程
  4. hive mysql远程模式_Hive远程模式启动
  5. 怎样考计算机教师资格证书,非师专生怎么考取计算机教师资格证书?
  6. Django获取request header信息
  7. checkbox修改默认样式
  8. 【SAP解决方案干货合集】满满的干货,是您了解华为云SAP解决方案的必备利器
  9. Linux 分区管理与swqp与逻辑卷创建修改删除
  10. PAT 乙级 1036. 跟奥巴马一起编程(15) Java版
  11. 从java 转到 c# 知识点
  12. 细说ASP.NET Cache及其高级用法
  13. 基于C++、MySQL的图书销售管理系统
  14. 怎么用dos命令打开计算机,如何使用DOS命令打开C盘下的文件夹dos如何打开文件夹...
  15. MTSP遗传算法解决
  16. 【Windows】Windows10 企业版 LTSC/Windows Server 2019如何安装应用商店和UWP应用?
  17. mysql左连接查询举例_mysql左右连接查询(有示例图)
  18. Scanvenger游戏制作笔记(九)Unity3D创建声音
  19. 人工智能帮助千万用户完成「隐形征信」计算
  20. 第1章第7节:如何通过大纲级别批量创建幻灯片 [PowerPoint精美幻灯片实战教程]

热门文章

  1. JavaScript数组怎么删除指定元素?
  2. Android网络定位实现
  3. 计算机错误1053,win10系统电脑宽带连接错误1053的修复方法
  4. 功能自动化测试之QTP录制脚本(一)
  5. 微信小程序问题归纳(一)
  6. CentOS7.9离线安装docker ce和docker-compose
  7. lightdb22.3预览-listagg 增强
  8. 特征选择—过滤法(Filter)、嵌入法(Embedded)和包装法(Wrapper)
  9. STM32F407学习笔记(1)基于hal库,CubeMX以及keil5的基本使用。
  10. chrome inspect 移动端调试