H5播放SVGA动画

最新推荐文章于 2023-12-04 09:20:07 发布

置顶程序员劝退师-TAO

最新推荐文章于 2023-12-04 09:20:07 发布

阅读量3.8k

点赞数 3

分类专栏：前端

本文链接：https://blog.csdn.net/CSDN877425287/article/details/108407816

版权

前端专栏收录该内容

10 篇文章

订阅专栏

本文介绍如何使用SVGA.Player库在Web页面中实现SVG动画的播放控制，包括暂停和停止动画的功能，并展示了完整的HTML代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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