在VUE中使用Lottie动画

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官方文档：https://lottiefiles.com/

vue-lottie Github地址：https://github.com/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'
Vue.component('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

 

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: 将在动画删除时触发