废话不多说,直接上代码 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
