一、html有支持SVG的标签,但是不支持SVGA
二、怎么做?
用的是开源的 https://gitcode.net/mirrors/svga/SVGAPlayer-Web/-/blob/master/README.zh.mdhttps://gitcode.net/mirrors/svga/SVGAPlayer-Web/-/blob/master/README.zh.md有说明的,下面是我的代码。
<!DOCTYPE HTML>
<html>
<head>
<title>动画</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>
<script src="https://cdn.jsdelivr.net/npm/svgaplayerweb@2.3.1/build/svga.min.js"></script>
</head>
<body id="box">
<div id="ssss" >
<button οnclick="givGift()">出现动画</button>
<button οnclick="stopAnimation()">停止播放动画</button>
<div id="demoCanvas" ></div>
</div>
<script>
var player = new SVGA.Player('#demoCanvas');
player.loops=1;
player.clearsAfterStop=true;
var parser = new SVGA.Parser('#demoCanvas'); // 如果你需要支持 IE6+,那么必须把同样的选择器传给 Parser。
function givGift(){
parser.load('applause.svga', function(videoItem) {
player.setVideoItem(videoItem);
player.startAnimation();
player.onFinished(function(){
});
})
}
</script>
</body>
</html>