Vue-lottie 簡介及應用

一、什麼是Vue-lottie

Vue-lottie 是一種在Vue應用程序中使用 LottieWeb動畫的簡便方法。Lottie是一個以JSON格式呈現Adobe After Effects動畫的開源JavaScript庫，具有在多個平台上呈現高質量矢量動畫的能力。Vue-lottie是利用Lottie實現在 Vue.js 中呈現複雜動畫的插件，帶來了非常不錯的用戶體驗。

二、vue-lottie 的應用

Vue-lottie 是在Vue項目中引用的, 要使用 vue-lottie 需要用到以下幾步：

1.使用 Vue CLI創建Vue工程項目

vue init webpack vue-lottie-demo

2.通過 npm 在項目中安裝 vue-lottie 插件

npm install vue-lottie --save

3.引入 Vue-lottie 到項目中

import Vue from 'vue'
import App from './App.vue'
import LottieAnimation from 'vue-lottie';
Vue.component('LottieAnimation', LottieAnimation)
new Vue({
  el: '#app',
  render: h => h(App)
})

4.將JSON格式的Lottie 動畫導入到項目中

在項目src目錄下創建資源文件夾 assets，將JSON格式的Lottie動畫文件放到 assets 文件夾中。動畫文件可以從 Lottie官方網站 中獲取。

5.在Vue組件中使用Vue-lottie組件

在組件中使用 Vue-lottie 組件，並將導入的JSON格式的Lottie動畫文件路徑作為屬性傳遞給組件，就可以在頁面上看到該動畫了。

<lottie-animation
  :animation-path="require('./../assets/animation.json')"
  :speed="1"
  :loop="true"
  :autoplay="true"
/>

三、vue-lottie 的實例

下面通過一個實例來說明 vue-lottie 如何使用。實例需求：我們需要在添加某一產品成功之後，彈出一個懸浮層，在其中添加一個從左向右飛行的小鳥動畫，體現添加產品成功後的喜悅。

1. 在Vue組件中使用 Vue-lottie 組件

在 Vue 組件中引入 Vue-lottie 組件，並將導入的 JSON 格式的 Lottie 動畫文件作為屬性傳遞給組件，如下所示：

<template>
  <div class="page">
    <div class="alert" v-show="alert.status">
      <h4>增加產品功能</h4>
       <lottie-animation 
        :animation-path="lottie"
        :speed="1"
        :loop="true"
        :autoplay="true"
        :style="{width: '100%'}"
        className="logo"
      />
    </div>
    ...

</template>

<script>
  import LottieAnimation from 'vue-lottie';
  import successAnimation from '@/assets/json/success.json';
  export default {
    data() {
      return {
        lottie: successAnimation,
      };
    },
    components: {
      LottieAnimation,
    },
  };
</script>

2、在用戶添加產品成功之後顯示動畫

當用戶添加產品成功後，我們可以通過一個 alert 組件來顯示動畫效果，如下所示:

<template>
  <form class="form-horizontal">
    <div class="form-group has-feedback">
      ...
    </div>
    <button type="submit" @click="add" class="btn btn-primary">添加產品&nbsp;&nbsp;&nbsp;&nbsp;</button>
  </form>
  <div class="alert" v-show="alert.status">
    <h4>增加產品功能</h4>
    <lottie-animation 
      :animation-path="lottie"
      :speed="1"
      :loop="true"
      :autoplay="true"
      :style="{width: '100%'}"
      className="logo"
    />
  </div>
</template>

<script>
  import LottieAnimation from 'vue-lottie';
  import successAnimation from '@/assets/json/success.json';
  export default {
    data() {
      return {
        alert: {
          status: false,
        },
        name: '',
        lottie: successAnimation,
      };
    },
    methods: {
      add() {
        this.alert.status = true;
      }
    },
    components: {
      LottieAnimation,
    },
  };
</script>

上述代碼實現該過渡效果，效果如下：


四、vue-lottie的插件API：

除了上述使用方式外，vue-lottie 還提供了一些API，可以幫助我們更好的進行開發。

1. animate()

該方法提供了從外部控制Lottie動畫的能力：停止，開始，暫停，重置，seak，在我們的組件中可以根據用戶的交互事件來觸發相應的方法呈現相應的動畫。

<template>
  <div>
    <lottie-animation 
      ref="lottieAnimation"
      :animation-path="require('@/assets/animation.json')"
      :speed="1"
      :loop="true"
      :autoplay="false"
      :style="{width: '100%'}"
      className="logo"
    />
    <button @click="play">Play</button>
    <button @click="stop">stop</button>
    <button @click="pause">pause</button>
  </div>
</template>

<script>
  import LottieAnimation from 'vue-lottie';
  export default {
    methods: {
      play() {
        this.$refs.lottieAnimation.animation.play();
      },
      stop() {
        this.$refs.lottieAnimation.animation.stop();
      },
      pause() {
        this.$refs.lottieAnimation.animation.pause();
      },
    },
    components: {
      LottieAnimation,
    },
  };
</script>

2. addEventListener()

該方法提供了用來處理每個與Lottie動畫相關的事件的能力，預設了三個事件參數：complete, loopComplete 和 enterFrame。例如：監聽動畫的播放完成事件

<lottie-animation 
  ref="lottieAnimation"
  :animation-path="require('@/assets/animation.json')"
  :speed="1"
  :loop="false"
  :autoplay="false"
  :style="{width: '100%'}"
  className="logo"
/>

<script>
  import LottieAnimation from 'vue-lottie';
  export default {
    mounted() {
      this.$refs.lottieAnimation.animation.addEventListener('complete', () => {
        console.log('動畫播放完成');
      });
    },
    components: {
      LottieAnimation,
    },
  };
</script>

總結

通過vue-lottie我們可以輕鬆集成Adobe After Effects的矢量動畫，讓動畫變得更加簡單、快捷，同時也可以通過API方法來實現一些動畫的控制功能，相比較於其他的播放插件更具有靈活性和適用性。在實際的開發中，我們可以結合項目的實際需求，對動畫進行更進一步的優化。