简单说说svga的应用，留个案例自己用

本文主要是介绍简单说说svga的应用，留个案例自己用，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

项目上临时要用到svga，所以就去官网看了看用法。写了个demo，记录一下，以便不时之需。

svga的github：https://github.com/svga/SVGAPlayer-Web

按照步骤操作即可
url一定是http这样的全链接形式。
这个demo是在html里用的，直接引入的cdn链接。想用在其他地方的，可以去官网看看。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>svga demo</title><style>#svga1 {width: 218px;height: 173px;}</style>
</head>
<body><!-- 第一步：建一个div，带上id属性 --><div id="svga1"></div><!-- 第二步，引入svga的cdn链接 --><script src="https://cdn.jsdelivr.net/npm/svgaplayerweb@2.1.0/build/svga.min.js"></script><script>// 第三步，实例化players和parsersvar players = [];var parsers = [];players[0] = new SVGA.Player("#svga1");parsers[0] = new SVGA.Parser("#svga1");var URLS = ["https://xxx.com/xxx.svga",]// 第四步，准备动画和使用动画svgaAnimation(players[0], parsers[0], URLS[0]);// loops 0 为循环 1为1次function svgaAnimation(player, parser, url){parser.load(url,function(videoItem){player.loops = 0;player.setVideoItem(videoItem);player.clearsAfterStop = false;  //默认是清空画布 ，这边设置不清空画布player.startAnimation();},function(err){console.log("svga播放失败");})}</script>
</body>
</html>

还有个api，是控制帧数的。

// 第一种写法，是在parser.load函数里写。控制所有的动画帧数
player.onFrame(function(i) {  // i 表示帧数// do something...i === 10 && console.log(1) // 比如 当动画播放到第10帧时，输出1
})// 第二种写法，单独控制一个player的动画帧数
players[x].onFrame(function(i) {// do something...
})

同一个svga动画在6个不同位置都循环播放

这时候的svga盒子，就不能用id来表示了，因为id是唯一值，要是有6个位置，就要写6个不同的id值，相当麻烦。这时候可以用类名来一次性完成。
详细demo如下：

<!--demo.html-->
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>同一个svga动画在6个不同位置都循环播放</title><link rel="stylesheet" href="demo.css">
</head>
<body><div class="whitecaosvga"></div><div class="whitecaosvga"></div><div class="whitecaosvga"></div><div class="whitecaosvga"></div><div class="whitecaosvga"></div><div class="whitecaosvga"></div><!-- 一定不要忘了引入svga文件哟 --><script src="https://cdn.jsdelivr.net/npm/svgaplayerweb@2.1.0/build/svga.min.js"></script><script src="demo.js"></script>
</body>
</html>

/*demo.css*/
* {padding: 0;left: 0;
}
.whitecaosvga {width: 218px;height: 173px;
}

/*demo.js*/
window.addEventListener('load', function() {var log = console.log || window.console.log;var $ = document.querySelector.bind(document);var $$ = document.querySelectorAll.bind(document);var whitecaosvga = $$('.whitecaosvga');var playerswc = [];var parserswc = [];for(var i = 0; i < 6; i++) {playerswc[i] = new SVGA.Player(whitecaosvga[i]);parserswc[i] = new SVGA.Parser(whitecaosvga[i]);}var URLS = ['https://ares.kktv8.com/kktv/resource/2021-05-13/20210513101721_470.svga',]for(var i = 0; i < 6; i++) {svgaTimes(playerswc[i], parserswc[i], URLS[0], 0);}/**引入控制动画播放次数的函数 *//**svga播放1次还是循环播放， times为0 则表示无限循环播放， times为1 则表示只播放1次 */function svgaTimes(player, parser, url, times) {function svgaAnimation(player, parser, url, times){parser.load(url,function(videoItem){player.loops = times;player.setVideoItem(videoItem);player.clearsAfterStop = false;  //默认是清空画布 ，这边设置不清空画布player.startAnimation();},function(err){console.log("svga播放失败");})}svgaAnimation(player, parser, url, times);}
})