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

代码简单说

已于 2024-11-28 23:21:49 修改

阅读量1.3k

点赞数 27

文章标签：直播礼物特效代码前端直播礼物礼物特效源码 web礼物特效礼物特效代码设计直播礼物方案和思路抖音直播礼物特效

于 2024-11-28 22:43:04 首次发布

本文链接：https://blog.csdn.net/weixin_41961749/article/details/144122303

版权

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

在这里插入图片描述

一、概述

动效作为产品与用户沟通的重要形式，不断演进发展。本文依据业务需求，全面对比常用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()