背景
SVGA (Scalable Vector Graphics Animation) 是一种矢量动画技术，通常用于移动应用和网页设计中。它使用矢量图形来创建动画，使得动画在不同分辨率的设备上都能保持清晰度和质量。
存在问题
不支持 渲染引擎 WebWorker 渲染播放
业务支撑丰富性受限
E-Svga 更符合业务需求的实现
官网地址：svga.yy.com/
支持多 Web Worker、离屏播放，性能直接拉满
智能识别播放环境，并根据项目编译环境进行代码适配
支持 Image Key 以及 Svga Key [
svga里面插入svga]经历超大型项目、高频多个动画同时播放的高性能需求验证 DEMO
使用
01 安装
npm i e-svga
02 使用
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特效的方式，减少了设计的工作量，各个子特效也能保持帧同步。
// 连送特效
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 成为开发者处理矢量动画的强大工具，适用于各种高性能和复杂动画需求的场景。
