安装

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调用。