SVGA优雅实现动画

最新推荐文章于 2024-08-09 08:31:14 发布

yyrSun

最新推荐文章于 2024-08-09 08:31:14 发布

阅读量6.1k

点赞数

分类专栏：动画技能集合文章标签：动画

本文链接：https://blog.csdn.net/yyjourney/article/details/88070126

版权

本文介绍了如何利用SVGA工具在项目中优雅地实现动画。通过全局安装并引入SVGA库，设置DOM节点，可以轻松控制动画的播放与停止。SVGA.Player和SVGA.Parser提供了丰富的功能，如设置动画循环次数、跳转到指定帧以及清空画布等，是实现动画效果的强大工具。

摘要由CSDN通过智能技术生成

在公司大部分是实现动画，今天分享一个特别好用的工具–SVGA

全局安装SVGA

 npm install svgaplayerweb --save

在使用时引入安装包

 import SVGA from 'svgaplayerweb';

设置Dom节点

<div id="demoCanvas" ></div>

具体使用

const svgUrl = '//yun.tuisnake.com/h5-mami/pluginAct/takePack1/cai1.svga';
const player = new SVGA.Player('#demoCanvas');
const parser = new SVGA.Parser('#demoCanvas'); // 如果你需要支持 IE6+，那么必须把同样的选择器传给 Parser。

    function animationInit() {
      parser.load(svgUrl, function(videoItem) {
        player.loops = 1;  设置循环播放次数是 1 
        player.setVideoItem(videoItem);
        player.stepToFrame(0, true); // 从指定帧开始播放动画
        player.onFrame((i) => {
          console.log(i);   //。这里输入的是动画的帧数
          if (i >= 24 && i < 26) {
            console.log