npm install
npm run serve

<template>
  <div class="home">
    <div class="wrap" ref="lavContainer" @click="changeAnimal"></div>
    <button v-on:click="change('wink')">wink</button>
    <button v-on:click="change('cry')">哭泣</button>
    <button v-on:click="change('laugh')">大笑</button>
    <button v-on:click="change('rolleyes')">轉(zhuǎn)眼睛</button>
  </div>
</template>

<script>
import lottie from 'lottie-web'
import * as animationData from '@/assets/lottie/AnimationLong.json'
import * as animationData1 from '@/assets/lottie/AnimationDate.json'//json 引入的json可能也會(huì)有問題，json文件下載的過程中丟失了？
export default {
  name: 'app',
  components: {
  },
  data() {
    return {
      anim: null,
      changeFlag: false
    }
  },
  mounted() {
    this.anim = lottie.loadAnimation({
      container: this.$refs.lavContainer,
      renderer: 'svg',
      loop: false,//是否循環(huán)
      autoplay: true,//自動(dòng)播放  倘若只需要一打開頁面就直接播放動(dòng)畫，可以設(shè)置為true。如果動(dòng)畫播放完，需要執(zhí)行其他的操作，可以設(shè)置動(dòng)畫播放多少秒結(jié)束（和制作動(dòng)畫的人配合，他會(huì)告訴你動(dòng)畫多長(zhǎng)時(shí)間，或者在lottie網(wǎng)站下的動(dòng)畫，進(jìn)到編輯頁面可以查看到動(dòng)畫的幀數(shù)時(shí)長(zhǎng)），直接進(jìn)行其他的邏輯。
      animationData: animationData,//這里有的可能會(huì)報(bào)錯(cuò)，可以使用require的方式
    }
    )
    this.anim.addEventListener('complete', () => { console.log('animation data has loaded') })//監(jiān)聽動(dòng)畫播放完，進(jìn)行操作
  },
  methods: {
    changeAnimal() {
      this.anim.destroy()
      this.anim = lottie.loadAnimation({
        container: this.$refs.lavContainer,
        renderer: 'svg',
        loop: this.changeFlag ? false : true,
        autoplay: this.changeFlag ? false : true,
        animationData: this.changeFlag ? animationData : animationData1,
      }
      )
      this.changeFlag = !this.changeFlag
    },
    change(type) {
      switch (type) {
        case 'rolleyes':
          this.anim.playSegments([[0, 23], [99, 105]], true)//播放片段  因?yàn)闆]有ui制作的json，所以直接自己假裝構(gòu)建一個(gè)比較自然的動(dòng)畫
          break
        case 'cry':
          this.anim.playSegments([[28, 48], [99, 105]], true)
          break

        case 'laugh':
          this.anim.playSegments([[50, 79], [99, 105]], true)
          break
        case 'wink':
          this.anim.playSegments([80, 100], true)
          break

      }
    }
  }
}
</script>

<style>
.home{
 
}
.wrap{
  width: 200px;
  height: 200px;
  overflow: hidden;
  margin: 0 auto;
}
</style>

animation.play(); // 播放該動(dòng)畫，從目前停止的幀開始播放

animation.stop(); // 停止播放該動(dòng)畫，回到第0幀

animation.pause(); // 暫停該動(dòng)畫，在當(dāng)前幀停止并保持

animation.goToAndStop(value, isFrame); // 跳到某個(gè)時(shí)刻/幀并停止。isFrame(默認(rèn)false)指示value表示幀還是時(shí)間(毫秒)

animation.goToAndPlay(value, isFrame); // 跳到某個(gè)時(shí)刻/幀并進(jìn)行播放

animation.goToAndStop(30, true); // 跳轉(zhuǎn)到第30幀并停止

animation.goToAndPlay(300); // 跳轉(zhuǎn)到第300毫秒并播放

animation.playSegments(arr, forceFlag); // arr可以包含兩個(gè)數(shù)字或者兩個(gè)數(shù)字組成的數(shù)組，forceFlag表示是否立即強(qiáng)制播放該片段

animation.playSegments([10,20], false); // 播放完之前的片段，播放10-20幀

animation.playSegments([[0,5],[10,18]], true); // 直接播放0-5幀和10-18幀

animation.setSpeed(speed); // 設(shè)置播放速度，speed為1表示正常速度

animation.setDirection(direction); // 設(shè)置播放方向，1表示正向播放，-1表示反向播放

animation.destroy(); // 刪除該動(dòng)畫，移除相應(yīng)的元素標(biāo)簽等。在unmount的時(shí)候，需要調(diào)用該方法

//監(jiān)聽
//eg
 this.anim.addEventListener('complete', () => { console.log('animation data has loaded') })//監(jiān)聽動(dòng)畫播放完，進(jìn)行操作

complete: 播放完成（循環(huán)播放下不會(huì)觸發(fā)）

loopComplete: 當(dāng)前循環(huán)下播放（循環(huán)播放/非循環(huán)播放）結(jié)束時(shí)觸發(fā)

enterFrame: 每進(jìn)入一幀就會(huì)觸發(fā)，播放時(shí)每一幀都會(huì)觸發(fā)一次，stop方法也會(huì)觸發(fā)

segmentStart: 播放指定片段時(shí)觸發(fā)，playSegments、resetSegments等方法剛開始播放指定片段時(shí)會(huì)發(fā)出，如果playSegments播放多個(gè)片段，多個(gè)片段最開始都會(huì)觸發(fā)。

data_ready: 動(dòng)畫json文件加載完畢觸發(fā) * DOMLoaded: 動(dòng)畫相關(guān)的dom已經(jīng)被添加到html后觸發(fā)

destroy: 將在動(dòng)畫刪除時(shí)觸發(fā)