svga动画安装和使用

1.npm安装

npm install svga --save

   yarn安装

yarn add svga

2.在你的Vue组件文件中引入Parser和Player：

import { Parser, Player } from 'svga';

3.svga基本使用（这里还判断了svga频繁点击会出现重叠效果的情况）

<template>
  <div>
    <canvas style="width: 250px; height: 250px;" id="svgaT"></canvas><br>
  </div>
</template>
<script>
import { Parser, Player } from 'svga'

export default {
  data() {
    return {
      url: 'https://photo.storage.vvvchat.com/assets/zj/op_1686118482.svga',
      svgaplayer: null,
      svgaparser: null,
      Booleansvga: false, //判断当前是否正在加载中
    }
  },
  created() {
    this.render()
  },
  methods: {
    render() {
      //如果正再加载svga的话 直接return
      if (this.Booleansvga) {
        return
      }
      this.Booleansvga = true //把此变量变为true 防止动画还没有加载完毕 又要新的动画加载
      let svgaURL = this.url //把第一次加载的url地址赋值给svgaURL
      this.svgaparser = new Parser()
      //这里动画加载地址
      this.svgaparser.load(this.url).then((svga) => {
        this.Booleansvga = false //加载完之后 把变量变为false
        if (svgaURL !== this.url) { //判断第一次播放svga地址是否等于当前选择的svga地址 
          this.render()
          return
        }
        this.svgaplayer = new Player(document.getElementById('svgaT'))
        this.svgaplayer.mount(svga)
        this.svgaplayer.start() //开始播放动画
      }).catch(err => {
        this.Booleansvga = false //加载完之后 把变量变为false
        console.log(err);
      })
    },
  }
}
</script>

4.停止播放或者清除svga动画

      this.svgaplayer?.stop();  //停止播放
      this.svgaplayer?.clear(); //清楚当前svga动画

5.结束
6.就这么简单