官網：[LottileFiles](https://lottiefiles.com/ "LottileFiles")，需要注冊登錄
安裝：`npm install --save vue-lottie`
如果需要重復使用，推薦寫成組件，不需要重復使用的話，可以通過cdn引入，直接使用
**1.cdn引入的方式：在官網直接復制html**
```
<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
<lottie-player src="https://assets1.lottiefiles.com/packages/lf20_JioBzM286M.json" background="transparent"
speed="1" style="width: 300px; height: 300px;" loop autoplay>
</lottie-player>
```
**2.在vue中組件的形式：**
```
//動畫組件
<template>
<div>
<!-- lottie動畫組件 -->
<lottie
:options="options"
:height="height"
:width="width"
@animCreated="handleAnimation"
/>
</div>
</template>
<script>
import lottie from "vue-lottie";//引入組件
export default {
components : {lottie},
props: {
// 寬
width : {
type : Number,
default : 200,
},
// 高
height : {
type : Number,
default : 200,
},
// 配置屬性
options : {
type : Object,
default : ()=>{
return {}
}
}
},
data() {
return {
anim : null,
};
},
created() {},
methods: {
// 方法：速度、暫停、開始等
handleAnimation(anim){
this.anim = anim;
}
},
};
</script>
```
```
//引入使用自定義的組件
//動畫json需求去官網下載成json格式的文件
<span style="display: inline-block">
<lottieAnim :options="defaultOptions" :height="200" :width="200" />
</span>
<script>
import lottieAnim from "@/components/lottie/index";//引入組件
import * as lottieJson from "../assets/lottieJson/129188-planning-poker-pup.json"; //lottie動畫json
data() {
return {
//lottie配置
defaultOptions: {
animationData: lottieJson.default /*文件資源*/,
},
}
}
</script>
```
