在vue里使用Lottie动画（实现 json 格式的动画）

一、Lottie简介与作用

Lottie是一个库，可以解析使用AE制作的动画（需要用bodymovin导出为json格式），支持web、ios、android和react native。在前端使用，lottie-web库可以解析导出的动画json文件，并将其以svg、canvas或者html的方式将动画绘制到页面中。

特点：
Lottie实现原理是由设计师出动画，导出为json，给前端展示。动画由设计使用制作工具Adobe After Effects来实现，然后前端不仅可以节约开发成本，而且可以高度还原设计的动画，且json文件大小比gif文件小很多，性能相对而言也更好

二、相关文档链接

Lottie官方文档：https://lottiefiles.com
vue-lottie 相关Github地址：https://github.com/chenqingspring/vue-lottie

三、在vue中使用

1、下载vue-lottie

npm install --save vue-lottie

2、引入使用

（1）全局引入

import lottie from 'vue-lottie'
Vue.component('lottie',lottie)

（2）在需要的组件内引入

import lottie from 'vue-lottie'
 
export default{
...
components:{
 lottie
}
...
}

（3）在需要的组件内引入需要实现动画的json文件

import * as animationData from '../../assets/data_loop.json';

3、在需要的组件内使用Lottie

<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配置项，设置宽高，animCreated方法用于创建lottie动画，它的方法返回一个anim对象，里面包含这个动画的所有属性。我们可以根据它返回的这个对象，来对lottie动画做一系列的控制。

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

lottie常用监听方法，我们可以在mounted时为动画添加监听器

Anim.addEventListener('data_ready', () => {
  console.log('animation data has loaded');
})

// 其他监听事件：
// complete: 播放完成后触发（循环播放下不会触发）
// loopComplete: 当前循环下播放（循环播放/非循环播放）结束时触发
// enterFrame: 每进入一帧就会触发，播放时每一帧都会触发一次，stop方法也会触发
// segmentStart: 播放指定片段开始时触发，playSegments、resetSegments等方法刚开始播放指定片段时会发出，如果playSegments播放多个片段，多个片段最开始都会触发。
// data_ready: 动画json文件加载完毕触发
// DOMLoaded: 动画相关的dom已经被添加到html后触发
// destroy: 将在动画删除时触发