腾讯开源Android动画库,腾讯开源的酷炫动画播放解决方案Vap初体验

同事在群里有提到Vap，播放炫酷动画的，可以让动画背景透明，就去了解了下。

也可以看下面的视频播放效果(不动点击播放)：

原本以为是直接弄个视频就可以播放。

后来查看官方案例，为了让动画背景有半透明特质，元素素材不是视频，而是PNG图片序列。

自己就不赘述，我就已通俗易懂方式，站在初次使用者的角度讲讲这个项目。

一、大致的实现思路

如果是让普通MP4视频，以画布的形式播放，则其实2D canvas就可以，video.captureStream()方法可以返回当前播放的视频流，然后在canvas中绘制呈现。

但是，2D canvas的性能是堪忧的，在移动端，如果画面很炫酷，是带不动的。

此时可以使用WebGL进行播放，视频帧作为纹理贴上去，因为WebGL会启动GPU加速，性能可以的，会非常流畅。

Vap底层就是使用的WebGL技术，所以性能有保证。

然而，上面的方式只适用于图片完全不透明的情况。

如果希望炫酷动画希望是半透明，或者部分区域全透明，则上面这种策略就会捉襟见肘。

有什么办法可以解决半透明的问题呢？

以前我曾提过一个CSS解决方案，就是使用CSS mix-blend-mode中的