在vue裡新增好看的lottie動畫 (^_^)

肥貓Charles發表於2018-08-02
Vue動畫

為什麼用lottie ★~★

1.能讓你的程式不那麼單調

2.能讓一些有審美強迫症的同學好受一點

3.網上有豐富的資源 點我進入lottie資源網站

官方例子

引入lottie庫 （>.<）

在vue中引入lottie非常非常簡單

1.安裝vue-lottie包

npm install --save vue-lottie
複製程式碼

2.全域性引入vue-lottie

在main.js引入並註冊全域性元件即可

import lottie from 'vue-lottie';
Vue.component('lottie', lottie)
複製程式碼
當然你也可以區域性引入 ~o~

3.引入你的lottie資源

在文中頂部lottie資源網站可以下載相應的資源，下載下來的檔案儲存到專案的資料夾下
// 第一步：script中引入資源
import * as animationData from "../assets/lottie/loading.json";
複製程式碼
// 第二步：使用元件
<lottie :options="defaultOptions" :height="200" :width="200" v-on:animCreated="handleAnimation" />
複製程式碼
// 第三步：data裡面新增相應屬性
data(){
    return {
        defaultOptions: { animationData: animationData },
        animationSpeed: 1,
        anim: {}
    }
}
複製程式碼
//第四步：定義方法
methods: {
    handleAnimation: function(anim) {
        this.anim = anim;
        console.log(anim); //這裡可以看到 lottie 物件的全部屬性
    },
}
複製程式碼
到這裡就大功告成了 QAQ
還有一些 stop,pause,setSpeed 的一些api方法就不細說了

最後貼上vue-lottie作者的github地址

vue-lottie

相關文章