在react项目中播放svga动画

1、首先在react项目中安装下第三方包svgaplayerweb

yarn add svgaplayerweb -D
or
npm i svgaplayerweb -D

2、存放svga资源文件source.js

export const svga = {
    
    
    "sky":'sky.svga',
}

3、封装好的svga.js 文件

import {
    
    
    svga
} from './source.js';   //svga的资源文件位置

const SVGA = require('svgaplayerweb')

var svgaParser = new SVGA.Parser();

//加载过存下来
const svgaMap = new Map()

/**
 * 快速加载svga资源，但不装载
 * @param name 资源name
 */
export const loadSVGA = (name) => {
    
    
    if (!svgaMap[name]) {
    
    
        svgaMap[name] = new Promise((resolve, reject) => {
    
    
            svgaParser.load(svga[name], (videoItem) => {
    
    
                svgaMap[name] = videoItem
                resolve(videoItem)
            }, (err) => {
    
    
                reject(err)
            })
        })
    }
    return svgaMap[name]
}
/**
 * 快速装载一个svga动画
 * @param name 资源name
 * @param className 挂载元素的class name
 * @param frame 从第几帧开始。默认0帧
 * @param callback 回调
 * @param loops 播放次数 默认为空，循环播放
 * @param clearsAfterStop 
 */
export const getSVGA = async (name, className, frame = 0, callback, play = true, loops, clearsAfterStop) => {
    
    
    const videoItem = await loadSVGA(name)
    var svga = new SVGA.Player(className);
    if (loops)
        svga.loops = loops;
    svga.clearsAfterStop = false
    if (clearsAfterStop)
        svga.clearsAfterStop = clearsAfterStop;
    svga.setVideoItem(videoItem);
    svga.stepToFrame(frame, play)
    svga.onFinished(() => {
    
    
        if (typeof callback == "function") {
    
    
            callback()
        }
    })
    return svga
}

4、用法

getSVGA("sky", ".warp", 0, null) //循环播放
getSVGA(资源名, 类名, 0, null)   //循环播放   具体可以参考上面getSVGA 参数说明