强!腾讯开源的kotlin高性能特效动画组件!
哈喽,各位新来的小伙伴们,大家好!由于公众号做了改版,为了保证公众号的资源能准时推送到你手里,大家记得将咱们的公众号 加星标置顶 ,在此真诚的表示感谢~
先看一下效果展示:
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---
更文不易,点个“在看”支持一下👇