H5播放SVGA动画

废话不多说,直接上代码
html

<!DOCTYPE HTML>
<html>
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style>
        #box{
            margin: 0px;
            padding: 0px;
            border: 1px violet solid;
        }
        #ssss{
            width: 100vh;
            height: 100vh;
        }

        #demoCanvas{
            width: 300px;
            height: 300px;
            margin: 0 auto;
            border: 1px salmon solid;
        }

    </style>
</head>

<body id="box">
<div id="ssss" >
<button onclick="pauseAnimation()">暂停在当前帧</button>
<button onclick="stopAnimation()">停止播放动画</button>
<div id="demoCanvas" ></div>
</div>
<script src="./svga.min.js"></script>
<script>

var player = new SVGA.Player('#demoCanvas');
player.loops=1;
player.clearsAfterStop=false;

var parser = new SVGA.Parser('#demoCanvas'); // 如果你需要支持 IE6+,那么必须把同样的选择器传给 Parser。


parser.load('http://sl.file.diaodiaosocial.com/1595325777179.svga', function(videoItem) {
    player.setVideoItem(videoItem);
    player.startAnimation();
    player.onFinished(function(){
        console.log("11111")
        alert("动画停止了!!!哈哈哈@@@")
    });
})




//暂停在当前帧
function pauseAnimation(){
    player.pauseAnimation();
}
//停止播放动画,如果 clearsAfterStop === true,将会清空画布
function stopAnimation(){
    player.stopAnimation();
}



</script>
</body>
</html>

这里引用的jsSVGAPlayer-Web
H5播放SVGA动画_第1张图片

你可能感兴趣的:(前端)