2.1.0 • Published 1 year ago
E-SVGA
高性能 SVGA 动画播放器
Feature
- 支持多 Web Worker、离屏播放，性能直接拉满
- 智能识别播放环境，并根据项目编译环境进行代码适配
- 支持 Image Key 以及 Svga Key
svga里面插入svga - 经历超大型项目、高频多个动画同时播放的高性能需求验证
Install
npm i e-svga
pnpm add e-svga
Use
import {svgaPlayer} from '@yy/svga'
svgaPlayer({
url: `remote url`,
container:document.getElementById('emp-root'), // emp v3.0 为例
useOffscreenCanvas: true, //启动离屏
useWebworker: true, //启动多线程播放
useDBCache: true, //启动 IndexDB 存储 svga 文件
}).then(svga => {
svga.start() // 开始播放
})
Config
常规配置
| 配置项 | 描述 | 类型 | 默认值 |
|---|
| url | 必填， SVGA 地址 http 或 base64 | string | |
| urlType | URL 类型 | http | base64 | http |
| swapTexts | 需要填充的自定义 text 信息 | CanvasFontParams[] | |
| swapImages | 需要填充的自定义图片信息 | CanvasImageParams[] | |
| container | 必填， div HTML 容器 | HTMLElement | |
| loop | 循环播放次数 | number | boolean | |
| fillMode | 填充模式 | PLAYER_FILL_MODE | |
| playMode | 播放模式 | PLAYER_PLAY_MODE | |
| startFrame | 开始播放帧 | number | |
| endFrame | 结束播放帧 | number | |
| useFrameCache | 启用帧缓存 | boolean | false |
| useIntersectionObserver | 监听容器是否处于浏览器视窗内，会根据实际环境自动判断 | boolean | true |
| useWebworker | 启用多进程，会根据实际环境自动判断 | boolean | true |
| useDBCache | 保存 SVGA 数据到 IndexDB | boolean | |
| useBitmap | 启用 bitmap 代替 base64，worker 模式下必须 true，会根据实际环境自动判断 | boolean | |
| useOffscreenCanvas | 启用离屏，worker 模式下必须 true，会根据实际环境自动判断 | boolean | |
| logLevel | 日志打印级别 | LogTypes | |
| checkTimeout | 播放超时开关 | boolean | |
| clearAfterStop | 播放结束后是否删除画面 | boolean | true |
| showPlayerInfo | 是否显示播放状态 | boolean | true |
| smooth | 是否平滑处理 | boolean | true |
| onGetConfig | 获取配置内容 | (op: any, options: ESvgaParamsI) => void | |
| resizeCanvas | 设置 canvas 大小 | ResizeCanvasType | percent |
| delayDestroyGap | 延迟释放时间 ms | number | |
事件回调
| 事件 | 描述 | 类型 |
|---|
| onStart | 监听 start | EventCallback |
| onResume | 监听 resume | EventCallback |
| onPause | 监听 pause | EventCallback |
| onStop | 监听 stop | EventCallback |
| onProcess | 监听 process | EventCallback |
| onLoopCount | 监听 loopCount | EventCallback |
| onEnd | 监听 end | EventCallback |
| onError | 监听 error | EventCallback |
| beforeStart | 监听 beforeStart | EventCallback |
方法
| 方法 | 描述 | 类型 |
|---|
| setup | 实例化 | () => Promise |
| start | 开始播放 | () => void |
| resume | 继续播放 | () => void |
| pause | 暂停播放 | () => void |
| stop | 停止播放 | () => void |
| clear | 清屏 | () => void |
| destroy | 注销播放器 | () => void |
| stepToFrame | PC 客户端专属方法 | (frame: number, andPlay: boolean) => void |
| setWindowState | PC 客户端专属方法 | (state: WINDOW_VISIBLE_STATE) => void |
| getBitmapsCache | 获取缓存帧内容 | (): Promise |
| addSwapImageText | 添加 Text Key | GetClassFn'addSwapImageText' |
| addSwapImage | 添加 Image Key | GetClassFn'addSwapImage' |
| addSwapImageList | 添加 Image List Key | GetClassFn'addSwapImageList' |
| addSwapSvga | 添加 SVGA Key | GetClassFn'addSwapSvga' |
| grayImage | 置灰 Image Key | GetClassFn'grayImage' |