一、安装
1、直接引入cdn
<script src="https://cdn.jsdelivr.net/npm/svgaplayerweb@2.0.7/build/svga.min.js"></script>
2、npm
npm install svgaplayerweb --save
二、使用
1、法一
import SVGA from 'svgaplayerweb';
<div id="demoCanvas" style="width: 300px; height: 300px"></div>
var svgUrl = 'http://sl.file.diaodiaosocial.com/1595325777179.svga';
var player = new SVGA.Player('#demoCanvas');
var parser = new SVGA.Parser('#demoCanvas'); // 如果你需要支持 IE6+，那么必须把同样的选择器传给 Parser。
parser.load(svgUrl, function(videoItem) {
player.loops=1; // 设置循环播放次数是1,0是无限播放
player.setVideoItem(videoItem);
player.startAnimation();
player.onFinished(function(){
alert("动画停止了！！！娃哈哈")
});
})
1、法二
<!-- 默认播放-循环播放 -->
<div style="width: 300px; height: 300px" src="http://sl.file.diaodiaosocial.com/1595325777179.svga" loops="0" clearsAfterStop="true"></div>
<!-- 默认播放-播放一次 -->
<div style="width: 300px; height: 300px" src="http://sl.file.diaodiaosocial.com/1595325777179.svga" loops="1" clearsAfterStop="true"></div>
下面贴上2种方法的完整代码
<!DOCTYPE HTML>
<html>
<head>
<title>svgaTest</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
#box {
width: 100vh;
height: 100vh;
}
#demoCanvas {
width: 300px;
height: 300px;
margin: 0 auto;
border: 2px salmon solid;
}
.defaultCanvas {
width: 300px;
height: 300px;
margin: 0 auto;
border: 2px black solid;
}
</style>
</head>
<body>
<div id="box" >
<button onclick="toAnimation()">开始播放动画</button>
<button onclick="pauseAnimation()">暂停在当前帧</button>
<button onclick="stopAnimation()">停止播放动画</button>
<div id="demoCanvas"></div>
<!-- 默认播放-循环播放 -->
<div class="defaultCanvas" src="http://sl.file.diaodiaosocial.com/1595325777179.svga" loops="0" clearsAfterStop="true"></div>
<!-- 默认播放-播放一次 -->
<div class="defaultCanvas" src="http://sl.file.diaodiaosocial.com/1595325777179.svga" loops="1" clearsAfterStop="true"></div>
</div>
<script src="https://cdn.jsdelivr.net/npm/svgaplayerweb@2.0.7/build/svga.min.js"></script>
<script>
var player = new SVGA.Player('#demoCanvas');
var parser = new SVGA.Parser('#demoCanvas'); // 如果你需要支持 IE6+，那么必须把同样的选择器传给 Parser。
player.clearsAfterStop=false;
//开始播放动画
function toAnimation(){
parser.load('http://sl.file.diaodiaosocial.com/1595325777179.svga', function(videoItem) {
player.loops=1; // 设置循环播放次数是1
player.setVideoItem(videoItem);
player.startAnimation();
player.onFinished(function(){
alert("动画停止了！！！娃哈哈")
});
})
}
//暂停在当前帧
function pauseAnimation(){
player.pauseAnimation();
}
//停止播放动画，如果 clearsAfterStop === true，将会清空画布
function stopAnimation(){
player.stopAnimation();
}
</script>
</body>
</html>
