【筆記】在vue項目中使用Lottie動畫

1，下載vue-lottie包

npm install --save vue-lottie
or
yarn add vue-lottie

2，在main.js中引入並註冊爲全局組件

//引入
import lottie from 'vue-lottie';

//註冊爲全局組件
Vue.component('lottie', lottie)

3，頁面使用

//----3.1 引入json文件（就是lottie動畫資源）----
import * as lottieJson from "../assets/lottie/lottie.json";

//-----------------3.2 html使用-----------------
<div class="home">
    <lottie :options="defaultOptions" :height="500" :width="500" @animCreated="handleAnimation"/>
    <div>
      <p>Speed: x{{animationSpeed}}</p>
      <input type="range" value="1" min="0" max="3" step="0.5" @change="onSpeedChange" v-model="animationSpeed" />
    </div>
    <button @click="stop">停止</button>
    <button @click="pause">暫停</button>
    <button @click="play">播放</button>
</div>

//---------------------3.3----------------------
  data(){
    return {
      defaultOptions: {
        animationData: lottieJson.default,   /*文件資源*/
      },
      animationSpeed: 1,   /*動畫速度*/
    }
  },

//----------------------3.4----------------------
  methods: {
    handleAnimation: function (anim) {
      this.anim = anim;
    },
    //停止
    stop: function () {
      this.anim.stop();
    },
    //暫停
    pause: function () {
      this.anim.pause();
    },
    //播放
    play: function () {
      this.anim.play();
    },
    //當滑塊控件值發生改變時，改變動畫的速度
    onSpeedChange: function () {
      this.anim.setSpeed(this.animationSpeed);
    }
  }