react使用SVGA特效 常用api

下载插件

npm install svgaplayerweb --save

react中代码

import React, { useEffect } from 'react';
import SVGA from 'svgaplayerweb'
const Svga = () => {
    const bofang = () => {
        var player = new SVGA.Player('#demoCanvas');//创建实例
        var parser = new SVGA.Parser('#demoCanvas'); //是否兼容
        parser.load('./angel.svga', function (videoItem) {//加载并回调
            player.loops = 1;//播放几遍
            player.setVideoItem(videoItem);
            player.startAnimation();//开始播放动画
            player.clearsAfterStop = true;
            // clear(): 清空动画画布。
            // startAnimation(): 开始播放动画。
            // pauseAnimation(): 暂停播放动画。
            // stopAnimation(reset)：停止动画播放，并可选择是否重置到初始状态。
            // stepToFrame(frame, andPlay): 跳转到指定帧进行播放，frame 是目标帧的索引，andPlay 表示是否继续播放。
            // on(event, callback): 添加事件监听器，常见事件包括 onFinished（动画播放完毕时触发）、onFrame（动画帧更新时触发）等。
        })
    }
    const qingping = () =>{
        var player = new SVGA.Player('#demoCanvas');
        player.clear()
    }
    return (
        <div>
            <button onClick={() => bofang()}>播放</button>
            <button onClick={()=>qingping()}>清屏</button>
            <div id="demoCanvas"></div>

        </div>
    );
}

export default Svga;

实现效果