# json 动画展示效果
## 相关链接
Lottie 官方文档：
vue-lottie 相关 Github 地址：/chenqingspring/vue-lottie
在 vue 里使用 Lottie 动画（实现 json 格式的动画）: /qq_44094296/article/details/115717841
## 依赖
需要安装插件
```javascript
npm install --save vue-lottie
```
## 使用
```vue
import lottie from 'vue-lottie' export default{ ... components:{ lottie } ... }
```
## 引入使用的 json 文件
```vue
import * as animationData from '../../assets/data_loop.json';
```
## 使用
```vue
<template>
<lottie
:options="defaultOptions"
:height="400"
:width="400"
@animCreated="handleAnimation"
/>
</template>
<script>
import * as animationData from "../../assets/data_loop.json";
export default {
data() {
return {
defaultOptions: { animationData: animationData },
};
},
methods: {
handleAnimation: function (anim) {
= anim;
},
},
};
</script>
```
## lottie 的参数 options 说明
```
animationData: animationData, //需要引入的json动画对象
renderer: 'svg', //渲染方式，svg、canvas、html（轻量版仅svg渲染）
loop: true, //是否循环播放，true表示循环，false表示不循环
autoplay: true, //是否自动播放，true表示自动播放
```
## 常用方法
```
(); // 播放该动画，从目前停止的帧开始播放
(); // 停止播放该动画，回到第0帧
(); // 暂停该动画，在当前帧停止并保持
(value, isFrame); // 跳到某个时刻/帧并停止。isFrame(默认false)指示value表示帧还是时间(毫秒)
(value, isFrame); // 跳到某个时刻/帧并从该帧往后进行播放
(30, true); // 跳转到第30帧并停止
(300); // 跳转到第300毫秒并从300毫秒开始向后播放
(arr, forceFlag); // 播放片段，arr可以包含两个数字或者两个数字组成的数组，forceFlag表示是否立即强制播放该片段，如果是false则需等前一个动画结束后开始播放，如果是true，则立即开始播放
([10,20], false); // 播放完之前的片段，播放10-20帧
([[0,5],[10,18]], true); // 直接播放0-5帧和10-18帧
(speed); // 设置播放速度，speed为1表示正常速度
(direction); // 设置播放方向，1表示正向播放，-1表示反向播放
(); // 删除该动画，移除相应的元素标签等。在unmount的时候，需要调用该方法
```