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

程序员文章站 2022-05-04 08:03:17

...

项目上临时要用到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/[email protected]/build/svga.min.js"></script>

	<script>
		// 第三步，实例化players和parsers
		var 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...
})