# json 动画展示效果
## 相关链接
Lottie 官方文档:https://lottiefiles.com
vue-lottie 相关 Github 地址:https://github.com/chenqingspring/vue-lottie
在 vue 里使用 Lottie 动画(实现 json 格式的动画): https://blog.csdn.net/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) {
this.anim = anim;
},
},
};
</script>
```
## lottie 的参数 options 说明
```
animationData: animationData, //需要引入的json动画对象
renderer: 'svg', //渲染方式,svg、canvas、html(轻量版仅svg渲染)
loop: true, //是否循环播放,true表示循环,false表示不循环
autoplay: true, //是否自动播放,true表示自动播放
```
## 常用方法
```
Anim.play(); // 播放该动画,从目前停止的帧开始播放
Anim.stop(); // 停止播放该动画,回到第0帧
Anim.pause(); // 暂停该动画,在当前帧停止并保持
Anim.goToAndStop(value, isFrame); // 跳到某个时刻/帧并停止。isFrame(默认false)指示value表示帧还是时间(毫秒)
Anim.goToAndPlay(value, isFrame); // 跳到某个时刻/帧并从该帧往后进行播放
Anim.goToAndStop(30, true); // 跳转到第30帧并停止
Anim.goToAndPlay(300); // 跳转到第300毫秒并从300毫秒开始向后播放
Anim.playSegments(arr, forceFlag); // 播放片段,arr可以包含两个数字或者两个数字组成的数组,forceFlag表示是否立即强制播放该片段,如果是false则需等前一个动画结束后开始播放,如果是true,则立即开始播放
Anim.playSegments([10,20], false); // 播放完之前的片段,播放10-20帧
Anim.playSegments([[0,5],[10,18]], true); // 直接播放0-5帧和10-18帧
Anim.setSpeed(speed); // 设置播放速度,speed为1表示正常速度
Anim.setDirection(direction); // 设置播放方向,1表示正向播放,-1表示反向播放
Anim.destroy(); // 删除该动画,移除相应的元素标签等。在unmount的时候,需要调用该方法
```