查看原文
其他

强!腾讯开源的kotlin高性能特效动画组件!

点击关注👉 技术最TOP 2022-08-26


哈喽,各位新来的小伙伴们,大家好!由于公众号做了改版,为了保证公众号的资源能准时推送到你手里,大家记得将咱们的公众号 加星标置顶 ,在此真诚的表示感谢~


先看一下效果展示:



1. VAP

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

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

2. 项目背景

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

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

测试参数:

  • 手机: 小米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诞生。

3. 实现原理

方案选择

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

视频透明度实现

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


举个例子,解码器解码出一帧原始图像后,合成原理如图所示: 

每一帧都做相同的事情,就是得到带透明度的视频,实际视频如下:原始视频中,黑白区域承载Alpha数据。VAP最新版本里实现了Alpha区域大小可变,通过缩小Alpha区域大小,在不影响最终显示效果的同时,能有效减少视频分辨率,提高机型兼容性,而且为VAP的融合特性空余出多余的区域。

动画配置信息

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

mp4的组织方式与JSON的key-value组织方式很像,被称为一个BOX,我们创建一个新的BOX(vapc VAP Config),JSON内容放到这个BOX里,播放前先读取此BOX然后播放(ps: mp4规范里定义如果无法识别的BOX自动忽略,不影响mp4正常播放流程)。 

VAP融合动画

VAP还支持在动画中融入自定义属性,比如用户名称, 头像。我们称其为VAP融合动画。

视频内容无法直接实现属性的插入,只能曲线救国,通过对属性图片进行修剪,欺骗用户的眼睛,让其看起来像是在视频内容里,实现最终的融合效果(效果如文章开头展示)。

为实现属性图片处理,需要引入“遮罩”素材,利用遮罩与属性图片进行Porter-Duff操作,就能得到需要的形状 

再将结果贴到视频对应坐标位置,就能实现最后的融合效果。

“遮罩”素材保存在每一帧视频内容里,之前通过缩小Aplha区域,空出来的区域得到利用。

配套工具

为大家更方便的使用组件,还有配套的素材制作工具

项目地址

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


送书活动

书籍介绍


华为HMS生态仅用一年时间,就已跃居全球第三大移动应用生态,注册开发者从去年的91万猛增至180 万人,全球集成HMS Core的应用数量也从4.3万增至9.6万个,增长123%。得到了全球开发者的接受和喜爱。为了让更多开发者和用户认识、了解华为HMS生态并加入其建设进程,华为官方首次出版了《华为HMS生态与应用开发实战》一书,本书从生态发展、技术架构、支持体系等多个维度,立体化地介绍了HMS的生态和技术,每位开发者,都可以通过本书了解华为HMS生态的历程,以及HMS Core详细的开放接口和能力,从而高效地构建应用程序。






送书规则:


1、本次送出3本《华为HMS生态与应用开发实战》

2、开奖时间为2021年1月4日20:00

3、扫描下方二维码关注「程序员大厂面试」 回复关键字送书获取抽奖码



---END---

推荐阅读:
微信大改版!新功能被网友骂上热搜!
Android之SparseArray源码解析
百度网盘这个新功能,快被这些LSP玩坏了!
Android 实现一个仿微信的图片选择器
想在Win 10上运行Android应用?微软这次要动真格了!
RecyclerView源码解析
离谱!上班划水神器:可以在控制台玩斗地主!
我去!VSCode 上竟然也能约会,谈对象了???
炫酷!RecyclerView视差装饰器-ParallaxDecoration


更文不易,点个“在看”支持一下👇

您可能也对以下帖子感兴趣

文章有问题?点此查看未经处理的缓存