Lottie简介
官方介绍：Lottie is a mobile library for Web, and iOS that parses Adobe After Effects animations exported as json with Bodymovin and renders them natively on mobile!http://airbnb.io/lottie/
Lottie是一个库，可以解析使用AE制作的动画（需要用bodymovin导出为json格式），支持web、ios、android和react native。在web侧，lottie-web库可以解析导出的动画json文件，并将其以svg或者canvas的方式将动画绘制到我们页面中。
Lottie的优点
Lottie方法方案是由设计师出动画，导出为json，给前端播放。所以，使用Lottie方案的好处在于：
动画由设计使用专业的动画制作工具Adobe After Effects来实现，使动画实现更加方便，动画效果也更好；前端可以方便的调用动画，并对动画进行控制，减少前端动画工作量；设计制作动画，前端展现动画，专业人做专业事，分工合理；卖家秀即买家秀，还原程度百分之百；使用lottie方案，json文件大小会比gif文件小很多，性能也会更好。
有用链接：（一部分整理内容来自于以下文档）
Lottie官方文档：/
vue-lottie Github地址：/chenqingspring/vue-lottie#license
Lottie介绍：http://test.imweb.io/topic/5b23a745d4c96b9b1b4c4efc
Lottie实践：http://test.imweb.io/topic/5b23a850d4c96b9b1b4c4efe
Lottie源码分析：http://test.imweb.io/topic/5b2b129e61340cbe5576ca44
使用方法及步骤：
1.在webStorm的terminal窗口中下载vue-lottie插件，下载命令：npm install --save vue-lottie
2.在main.js文件中引入vue-lottie插件,你可以将其设置为全局组件，也可以在需要使用的时候单独引入
第一种：全局引入,在main.js中加入如下代码
import lottie from 'vue-lottie'ponent('lottie',lottie)
第二种：局部引入
在vue文件中引用vue-lottie,然后在组件中进行注册
import lottie from 'vue-lottie'export default{...components:{'lottie':lottie}...}
第3步：在使用到的Vue文件中引入lottie json文件
import Anim from "../assets/anim.json"
第4步：在我们需要使用到的菜单位置使用lottie
<lottie :options="defaultOptions" :width="24" :height="24" v-on:animCreated="handleAnimation" />data:{return{defaultOptions:{animationData:Anim,loop:false,autoplay:false},defaultAnim:''}},methods:{handleAnimation(anim){this.defaultAnim = anim;}}
说明：lottie初始化时，需要指定一个options配置项，因为lottie是没有宽高的，所以宽高必须设置，animCreated方法用于创建lottie动画，它的方法返回一个anim对象，里面包含这个动画的所有属性。我们可以根据它返回的这个对象，来对lottie动画做一系列的控制。
lottie的参数options说明：
container: element, //要包含该动画的dom元素renderer: 'svg', //渲染方式，svg、canvas、html（轻量版仅svg渲染）loop: true, //是否循环播放，true表示循环，false表示不循环autoplay: true, //是否自动播放，true表示自动播放animationData: animationData, //需要引入的json动画对象
可调用方法：
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: 将在动画删除时触发
