前端实现抖音直播礼物特效播放代码方案及视频融合优化方案

基于业务需求 前端实现抖音直播礼物特效播放代码方案及优化方案

在这里插入图片描述

一、概述

动效作为产品与用户沟通的重要形式，不断演进发展。本文依据业务需求，全面对比常用Web动效格式的差异，调研优秀特效播放方案，经改造实现功能升级，以满足如直播间及语聊房礼物特效等多样化业务场景需求。

二、背景

在直播间及语聊房等场景中，礼物特效作为常见增值玩法，用户对其多样性需求持续增长。近期业务期望参照抖音实现定制跑车特效，通过用户个性化选配送出多样礼物，满足用户独特及炫耀心理。

（一）抖音效果展示

三、方案调研

最初看到定制跑车特效需求时，考虑通过游戏引擎实现，提出以下两种方案及面临的问题：

（一）方案一：制作3D模型，更换每个部件（类似换装）

• 问题：
  • 3D模型制作成本高、周期长。
  • 技术方案不可复用，后续仍需研发投入。
  • 业务属性决定礼物特效多平面，非单一主体，游戏研发不适用，视频播放更合适。

（二）方案二：枚举合成组合好的视频，提前生成

• 问题：
  • 存储成本和服务端压力大，部件越多需合成视频数量越多。
  • 运营配置和检查成本高，每个视频都需运营确认。
  • 扩展性差，增加部件分类需重新合成所有视频。

鉴于上述方案的局限性，需重新寻找更优解决方案。

四、常用动效格式分析

Web动效有多种格式，各有利弊，从业务需求出发选取相对较优方案至关重要。以下是常见动效格式的详细分析：

（一）Gif

• 简介：1987年由Compu Serve发展起来的位图动画格式，有GIF87a和GIF89a两个版本。
• 优点：
  • 支持平台多，兼容性好。
  • GIF89a版本支持透明。
• 缺点：
  • 仅支持8位256种颜色，色彩范围高时易失真、出现白边锯齿等。
  • 不支持半透明。
  • 体积较大，播放资源占用高。
  • 只能循环播放（可通过第三方库实现播放暂停）。
• 使用示例：

<img src="http:xxx.gif" />

在这里插入图片描述

（二）Apng

• 简介：2004年由Mozlilla开发的基于PNG的位图动画格式，也称“动态png”，后缀名仍为.png。
• 优点：
  • 支持平台多，兼容性好。
  • 保留对传统PNG向下兼容。
  • 支持24位真彩色图片及8位Alpha透明通道，支持半透明，色彩范围广，还原度高。
• 缺点：
  • 只能设定播放次数或循环播放（可通过第三方库转换为canvas播放和暂停动画）。
  • 对于复杂动效，体积大且加载时间长。
• 使用示例：

<img src="xxx.png" />

在这里插入图片描述

（三）Webp

• 简介：2010年由Google推出的新一代图像格式，旨在提供更好压缩效果与用户体验。
• 优点：
  • 支持有损压缩和无损压缩两种形式。
  • 压缩算法先进，同等质量下体积更小。
  • 支持透明度。
• 缺点：
  • iOS设备兼容性差。
  • 只能循环播放（可通过第三方库转换为canvas播放和暂停动画）。
• 使用示例：

<img src="xxx.webp" />

在这里插入图片描述

（四）Lottie

• 简介：2017年由Airbnb开源的跨平台动画效果解决方案，可将Adobe After Effects设计的动画导出为JSON格式应用于多平台。
• 优点：
  • JSON文件可二次编辑。
  • 可操控度高，可设置播放相关参数及监听播放事件。
  • 可无失真放大或缩小。
  • 体积小。
• 缺点：
  • 对缓动曲线的解析占用内存高。
  • 复杂粒子效果支持度差。
• 使用示例：

npm install lottie-web

import lottie from 'lottie-web'

lottie.loadAnimation({
  container: xxxElement,
  renderer: 'svg',
  loop: true,
  autoplay: true,
  path: 'xxx.json'
});

在这里插入图片描述

（五）Svga

• 简介：2016年由国内YY公司开发的跨平台开源动画格式，兼容多平台，动效设计及使用方式与Lottie相似且性能表现更佳。
• 优点：
  • 库体积及动画文件体积小。
  • 支持序列帧动效。
• 缺点：
  • 部分特效支持度不如Lottie。
  • 解码时间长，长时间播放内存占用高。
• 使用示例：

npm i svga

import { Parser, Player } from 'svga'

const parser = new Parser()
const svga = await parser.load('xxx.svga')

const player = new Player(document.getElementById('canvas'))
await player.mount(svga)

player.start()

在这里插入图片描述

（六）MP4

• 简介：一种流行多媒体文件格式，支持多种媒体数据，编码可提供清晰视频画面。
• 优点：
  • 兼容性高。
  • 完美还原设计。
  • 压缩率高，体积小。
  • 支持边下边播。
  • 支持音频。
  • 输出简单。
• 缺点：
  • 不支持透明度，大面积动效遮挡用户界面，视觉效果差。
• 使用示例：

<video src='xxx.mp4' />

五、视频融合方案

MP4格式虽有诸多优点，但不支持透明度这一缺点明显。为此，提出视频融合方案解决该问题：

（一）原理

将MP4看作由数帧图片组成，利用AE导出同步的Alpha视频并拼接，使视频包含完整RGB和Alpha信息。Web开发者提取相关信息融合为新的RGBA值，渲染到屏幕实现半透明效果。

（二）实现方式

介绍了获取视频每帧、解析及重新渲染的相关原理及涉及的代码操作等内容，同时分析了在实现过程中遇到的问题及应对思路。

六、AlphaVideoPlayerJs相关

参考优秀案例实现原理，开发AlphaVideoPlayerJs，以下是其相关介绍：

（一）原理

• video部分：获取视频后监听每一帧，调用相关方法进行帧解析，核心代码实现了不同条件下的帧监听逻辑。
• canvas2d部分：最初使用Canvas2D对每帧图片遍历解析，但存在CPU计算频率高、浏览器表现不佳甚至页面崩溃等问题。
• webgl部分：鉴于Canvas2D的问题，尝试使用WebGL进行图形化渲染，经测试有效降低了CPU使用率。

（二）优化措施

• 高清渲染：通过devicePixelRatio恢复canvas尺寸，保证渲染效果。
• 帧监听降级：采用三级兼容性降级监听视频帧。
• 渲染降级：设置双渲染器，优先采用webgl-render，兼容降级采用canvas2d-render。
• 多方向视频支持：支持四类Alpha MP4。
• 丰富事件与场景支持：支持所有原生video事件，并可根据不同场景进行配置。

（三）效果展示

遵循最小化配置、开箱即用原则，默认配置渲染DOM和视频地址即可使用，展示了实际使用效果动图。

七、多视频融合

介绍多视频融合的原理，通过多纹理渲染，根据要渲染的video个数动态生成片元着色器代码，将多个纹理颜色叠加混合得到最终要渲染的颜色，并展示了最终效果及单部件视频效果动图。

八、性能简述

对比了4个单独的mp4播放器与一个多纹理视频播放器播放4个mp4视频时的CPU占用情况，多纹理视频播放器性能提升约30%。

九、总结

Alpha MP4虽有优势，但长时间或无间断重复性播放可能带来性能问题。动效实现方式多样，应分析各动效格式优缺点，结合业务需求选择最佳实践方式。

欢迎大家在评论区留言讨论，分享更多关于Web动效实现的想法和经验。