官网:https://design.alipay.com/
介绍:https://www.yuque.com/lottie/document/readme
使用:https://www.yuque.com/lottie/document/web

npm i lottie-web

    <div class="box" ref="box"></div>
    <button @click="startFun">播放</button>
    <button @click="suspendFun">暂停</button>
    <button @click="stopFun">停止</button>

import lottie from "lottie-web";
import  animationData from './data.json';

 data() {
    return {
      anim: null,
    };
  },
  mounted(){
    this.init()
  },
  methods: {
    init() {
      this.anim = lottie.loadAnimation({
        container: this.$refs.box,
        renderer: "svg",
        loop: true,
        autoplay: true,
        animationData: animationData
      });
    },
    // 播放
    startFun() {
      this.anim.play()
    },
    //暂停
    suspendFun() {
       this.anim.pause()
    },
    // 停止
    stopFun(){
       this.anim.stop()
    }
  },

animationData的获取

https://design.alipay.com/emotion/editor 随便创建一个