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

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

 

Logo

前往低代码交流专区

更多推荐