一、安裝
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>
