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

最新推荐文章于 2023-09-26 15:18:25 发布

新生代农民工官方认证码农小拽

最新推荐文章于 2023-09-26 15:18:25 发布

阅读量594

点赞数

分类专栏：案例测试 svga

本文链接：https://blog.csdn.net/tuzi007a/article/details/116739884

版权

案例测试同时被 2 个专栏收录

12 篇文章 3 订阅

订阅专栏

svga

1 篇文章 1 订阅

订阅专栏

项目上临时要用到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和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...
})

同一个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);
  }
})

新生代农民工官方认证码农小拽

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
简单说说svga的应用，留个案例自己用

项目上临时要用到svga，所以就去官网看了看用法。写了个demo，记录一下，以便不时之需。自己看的，也懒得排版了…svga的github：https://github.com/svga/SVGAPlayer-Web按照步骤操作即可url一定是http这样的全链接形式。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-
复制链接

扫一扫

专栏目录