一想起直播，除了老铁 666，让我印象深刻的就是各种飘着的大飞机大火箭了 那么此次分享，咱们就来了解一下这些礼物的播放方式

一想起直播，除了老铁 666，让我印象深刻的就是各种飘着的大飞机大火箭了

那么此次分享，咱们就来了解一下这些礼物的播放方式

1. Gif

使用简易度	⭐ ⭐ ⭐ ⭐ ⭐
体积大小	⭐ ⭐ ⭐
多平台兼容性	⭐ ⭐ ⭐ ⭐ ⭐
实用性	⭐ ⭐ ⭐

缺点很明显，仅最高支持 256 种颜色，随着动画时长的增加也会使文件体积增大和大量占用手机内存。

demo：

2. Webp

使用简易度	⭐ ⭐ ⭐ ⭐ ⭐
体积大小	⭐ ⭐ ⭐ ⭐ ⭐
多平台兼容性	⭐ ⭐ ⭐
实用性	⭐ ⭐ ⭐

webp 实现原理是把所有的序列帧合成一个 webp 文件，所以它的体积是序列帧*帧数。

相同的效果，webp 格式要比 png 格式小出来大概一半的大小。

缺点：移动端 ios 的表现不好，例如苹果 6 设备用的是 ios12 左右的版本，对于 webp 格式就并不支持。

demo：

3. Apng

使用简易度	⭐ ⭐ ⭐ ⭐ ⭐
体积大小	⭐ ⭐ ⭐ ⭐
多平台兼容性	⭐ ⭐ ⭐ ⭐ ⭐
实用性	⭐ ⭐ ⭐ ⭐ ⭐

Apng 的兼容性更好，色彩范围比 Gif 广，更清晰，占用内存更小。

4. Lottie

使用简易度	⭐ ⭐ ⭐
体积大小	⭐ ⭐ ⭐ ⭐ ⭐
多平台兼容性	⭐ ⭐ ⭐ ⭐ ⭐
实用性	⭐ ⭐ ⭐ ⭐ ⭐

在 Apng 兼容性没那么好之前，比较通用的就是 Lottie 了

之前老是听同事说 Lottie 性能不好，性能不好，性能不好！

我想可能有以下几点原因导致

• 文件大小： Lottie JSON 文件的大小对性能有影响。较大的文件需要更多的时间来加载和解析，这会导致启动延迟和占用更多的内存。
• 设备性能： 低端设备可能无法处理复杂的动画效果，导致性能下降。
• 不合理的使用： 在页面上同时使用大量的 Lottie 动画会对性能有影响。 不断重绘 Lottie 动画时，也会导致性能问题。

5.MP4

说到 mp4 大家可能有疑问，mp4 并不支持 alpha 通道啊，为什么会用 mp4 去播放礼物呢，不会把背景都盖住吗？

不知道大家有没有抓过直播礼物的 mp4 信息，大概长上面这样

上半部分是视频信息，下半部分是透明通道信息

渲染的时候前端无论是用 canvas2d 或者 webgl 都可以根据透明通道信息把视频渲染出来

6. Vap

使用 Tencent/vap 播放器，有高压缩率、硬件解码、各平台兼容性好的优点。

1. vap 的资源

资源由官方自带的 VapTool 导出，一个通过 Java 调用 ffmpeg 把 视频序列帧 和 融合信息序列帧 导出为合二为一的 mp4 以及记录着每一帧融合信息的 json 文件的工具。

2. vap 的播放器

pc 播放器由 webgl 编写，把 Json 中 frame 信息渲染出来。

项目中遇到了什么问题，怎么解决的

PC 播放器 播放官方工具导出 带融合信息的素材 时，会产生黑边效果。

后经大量的素材以及实践发现，vaptool 为了优化素材大小；加上融合信息的情况下，视频信息和透明通道信息会导出 1 : 0.5（有黑边），没有融合信息的时候导出的比例是 1:1（无黑边）。

自己写了个 webgl 的 demo，渲染 1:0.5 的素材时，也会有黑边现象，邃确认为 webgl 的问题。

估计是 webgl 在渲染某一个点信息时为了抗锯齿，走了多点采样策略，又因为 0.5 不精准 采到了黑色背景的像素点，导致了黑边现象。

解决方案：从导出素材的工具下手，将用于 pc 端的素材全部导出为 1:1

VapTool 没有 选择配置比例 的选项，把 vaptool 代码 down 下来，将 ffmpeg 导出的比例强制改成 1:1，再打成 jar 包。供设计导出 PC 素材时使用。

后续优化

问题：PC 需要使用到 MP4 和 Json 一起工作才能渲染，而移动端只存储了 MP4 地址。

过程：观察 mp4 信息，发现 mp4 里存在 vapc 字段，vapc 字段里对应的就是导出素材的 json。

解决方案：使用 gpac/mp4box.js 库取 vapc 里的 json，同步了移动端，只需要配置 pc 的 mp4 就可以播放礼物了 ～

参考文献

• [1] Github-Vap