json动画：vue-lottie

1、安装

npm install --save vue-lottie

2、注册

// 方法一：main.js中全局注册
import lottie from 'vue-lottie'
Vue.component('lottie',lottie)

// 方法二：局部注册
import lottie from 'vue-lottie'
export default {
  components: {
    lottie
  }
}

3、使用

  <lottie
    :options="{
      animationData: dataJson,
      loop: true,
    }"
    v-on:animCreated="createLottie"
  />
  
  import dataJson from '@/assets/json/data.json'
  export default {
    data() {
      return {
        dataJson,  // lottie实例需要的json数据
        anim: '', // lottie实例
      }
    },
    methods: {
      /**
       * 创建lottie实例
       */
      createLottie(anim, index) {
        this.anim = anim
      },
      /**
       * 停止动画
       */
      stopLottie() {
        this.anim.stop()
      },
      /**
       * 播放动画
       */
      stopLottie() {
        this.anim.play()
      },
      /**
       * 暂停动画
       */
      pauseLottie() {
        this.anim.pause()
      },
    }
  }

josn文件数据可借助AE插件Bodymovin