下载插件

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;

实现效果