背景

SVGA (Scalable Vector Graphics Animation) 是一种矢量动画技术，通常用于移动应用和网页设计中。它使用矢量图形来创建动画，使得动画在不同分辨率的设备上都能保持清晰度和质量。

存在问题

不支持渲染引擎 WebWorker 渲染播放
业务支撑丰富性受限

E-Svga 更符合业务需求的实现

官网地址：svga.yy.com/

支持多 Web Worker、离屏播放，性能直接拉满
智能识别播放环境，并根据项目编译环境进行代码适配
支持 Image Key 以及 Svga Key $`svga`里面插入`svga`$
经历超大型项目、高频多个动画同时播放的高性能需求验证 DEMO

使用

01 安装

css 复制代码

npm i e-svga

02 使用

ts 复制代码

import svgaPlayer, {type SvgaPlayerType} from 'e-svga'
 const div = useRef<HTMLDivElement>(null)
 //<div className="svgaPlayer" ref={div}></div>
 const url = 'https://.../xxx.svga'
 
 const svga: SvgaPlayerType = await svgaPlayer({
      url,
      container: div,
      loop: 1, // true: 循环播放， 2：循环2次后停止，3：循环3次后停止，...
      onEnd(e) {
        // play end.
      },
    })
  svga.start()

03 svga嵌套svga

这个情况应用在比较复杂的svga组合场景，例如：

如图标识

1是特效背景，有8个等级
2有十多个效果，
3有3个效果

每处都是一个动效，如果组合成一起，将有8x10x3=240以上的组合情况，大大增加了设计的工作量，通过组合svga特效的方式，减少了设计的工作量，各个子特效也能保持帧同步。

ts 复制代码

 // 连送特效
  let url = getUrl(`svga/bg_11-2_0.svga`)
  let imageKey = 'hitsBannerEffect'
  await svga.addSwapSvga(url, {
    imageKey,
  })
  url = getUrl(`svga/perfect-2_0.svga`)
  imageKey = 'appraiseEffect'
  await svga.addSwapSvga(url, {
    imageKey,
  })
  
  svga.start()

配置

Name	Type	Default	Description
container	HTMLElement	必填	div html 容器
url	string	必填	svga地址，或资源base64
loop	number、boolean	true: 循环播放	循环播放次数
urlType	'http'、'base64'	http	url 类型
startFrame	number	0	开始播放帧
endFrame	number	最后一帧	结束播放帧
swapTexts	CanvasFontParams\[\]	undefined
swapImages	CanvasImageParams\[\]	undefined
useFrameCache	boolean	false	启用帧缓存
useIntersectionObserver	boolean	true	监听容器是否处于浏览器视窗内会根据实际环境自动判断, 开启时：容器不显示时，不渲染
useWebworker	boolean	true	启用多进程会根据实际环境自动判断，useOffscreenCanvas为true时才能开启
useDBCache	boolean	false	保存svga 数据
useOffscreenCanvas	boolean	true	启用离屏注意：worker模式下必须true 会根据实际环境自动判断
logLevel	'debug'、'info'、'warn'、'error'	'info'	日志打印级别
fetchOption	any		fetch请求额外选项
checkTimeout	boolean	false	播放超时开关
clearAfterStop	boolean	true	播放结束后是否删除画面, 如果为false, 需要外部择时调用destroy()释放资源
showPlayerInfo	boolean	true	是否显示播放状态
smooth	boolean	true	是否平滑处理
resizeCanvas	'percent'、'percentW'、'percentH'、'size' 、 'percent'	percent 为 width 100% height 100%percentW 为 width 100%percentH 为 height 100%size 为特效原尺寸
delayDestroyGap	number	0	延迟释放时间，单位ms

使用说明

支持离屏渲染以及多线程播放; 多个动画同时播放，UI操作也可以流畅的进行；
设置循环播放次数, loop: 3 循环播放3次，loop: true 循环播放；
播放到最后一帧暂停，clearAfterStop: true；
设置缩放模式resizeCanvas，'percent'---- width 100% height 100%, size---- 特效原尺寸；
文字替换，支持同一个key，并排多个字符串, 扩展：支持文字描边；
图片替换，支持同一个key，并列多个图片，扩展：支持置灰key图片；
svga嵌套svga：在key上渲染svga.

性能体现

以svga.yy.com/performance页面为例，同时渲染12个年兽特效，性能数据如下：

	max CPU	内存(JS heap size)	备注
PC web	2.7%	7.6MB	Win10 i7-8700CPU 32G内存
Android	3.2%	5.3MB	Huawei Nova 5 pro 8G内存

总结

E-Svga 提供了一个强大的工具集来处理矢量动画，解决了传统 SVGA 技术的一些局限性。它不仅支持多 Web Worker 和离屏播放，还能智能识别播放环境，并根据需求进行代码适配。通过支持嵌套的 SVGA 动画，为复杂动画场景提供了解决方案，极大地减少了设计的工作量。

以下是 E-Svga 的主要优点：

性能优化：多 Web Worker 和离屏播放显著提升了动画性能。
智能适配：根据项目编译环境自动进行代码适配。
灵活性：支持嵌套 SVGA 动画，适用于复杂动画场景。
高性能验证：经过大规模项目的实际使用验证，确保了稳定性和可靠性。

通过这些特性，E-Svga 成为开发者处理矢量动画的强大工具，适用于各种高性能和复杂动画需求的场景。

ESVGA-高性能动画效果播放器实现

背景