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'] |