lottie-vue

安装

npm i lottie-vue

使用

<template>
  <div>
    <h1 @click="play">点击文字或图案</h1>
    <lottie-vue 
      ref="lottieVue"
      :width="500"
      :height="500"
      :autoplay="false"
      :clickPlay="true"
      :loop="false" 
      :manualLoop="false"
      path="https://assets7.lottiefiles.com/packages/lf20_tmyg7clb.json"
      // animationData:require('您的本地json路径'),
      @onComplete="onComplete"
      @onEnterFrame="onEnterFrame"
      @onSegmentStart="onSegmentStart"
    >
    </lottie-vue>
  </div>
</template>

<script>
import LottieVue from "lottie-vue"
export default {
  components: {
    LottieVue
  },
  methods:{
    onComplete(){
      console.log("onComplete");
    },
    onEnterFrame(){
      console.log("onEnterFrame");
    },
    onSegmentStart(){
      console.log("onSegmentStart");
    },
    play(){
      this.$refs.lottieVue.play()
    }
  }
}
</script>

Attributes

参数	说明	类型	可选值	默认值
renderer	渲染器	String	svg / canvas / html	svg
loop	循环播放	Boolean	true / false	true
autoplay	自动播放	Boolean	true / false	true
manualLoop	事件播放循环	Boolean	true / false	true
clickPlay	点击播放	Boolean	true / false	false
mousePlay	鼠标移入播放	Boolean	true / false	false
name	动画名称，用于 reference	-	-	-
animationData	json 动画数据	-	-	-
path	json 网络路径（与animationData互斥，animationData优先）	-	-	-
animationData	json 本地路径	-	-	-
direction	方向	Number	1：正向 / -1：反向	1
speed	速度	Number	取值>0 1为倍速	1
width	宽度	Number	-	-
height	高度	Number	-	-

Events

事件名称	说明	回调参数
onComplete	非循环动画执行一次触发	-
onLoopComplete	循环动画每执行一次触发	-
onEnterFrame	动画准备完毕触发	-
onSegmentStart	每进行一帧执行一次	-

Methods

方法名称	说明	回调参数
stop	停止动画	-
play	播放动画	-
pause	暂停动画	-
setSpeed	设置播放速度	取值>0 1表示倍速
setDirection	设置播放方向	1：正向 / -1：反向
goToAndStop	跳到某一帧或者某一秒停止	第一个参数为数字，取值>0；第二个参数为Boolean，true为跳到某一帧，false为跳到某一时间
goToAndPlay	跳到某一帧或者某一秒开始播放	第一个参数为数字，取值>0；第二个参数为Boolean，true为跳到某一帧，false为跳到某一时间
playSegments	播放某些片段	第一个参数为数组，两个元素为开始帧和结束帧；第二个参数为Boolean，是否立即播放片段，还是等之前的动画播放完成
destroy	销毁动画实例	-

基于lottie-web二次开发，丰富了一些功能，简化了api调用。