美文网首页
vue中使用svga动画

vue中使用svga动画

作者: IssunRadiance | 来源:发表于2021-09-09 10:37 被阅读0次

    1.npm安装

    npm install svgaplayerweb —save
    

    2.页面中引入

    import SVGA from "svgaplayerweb"
    

    3.html部分

    
    <div id="demoSvag" class="demoSvag" ref="demoSvag"></div>
    
    

    4.js部分

    
    mounted() {
    
          this.SVGA()
    
    },
    
    
    
    SVGA() {
    
            let player = new SVGA.Player("#demoSvag");
    
            let parser = new SVGA.Parser("#demoSvag");
    
            parser.load(this.bgImg, function(videoItem) {   //this.bgImg,图片路径需要线上地址,本地引用会报错   this.bgImg为svga动画的线上地址
    
              player.setVideoItem(videoItem);
    
              player.startAnimation();
    
            });
    
          },
    
    

    相关文章

      网友评论

          本文标题:vue中使用svga动画

          本文链接:https://www.haomeiwen.com/subject/iajiwltx.html