json 动画展示效果-vue

# 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的时候，需要调用该方法

```