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可能也會有問題，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,//自動播放  倘若只需要一打開頁面就直接播放動畫，可以設(shè)置為true。如果動畫播放完，需要執(zhí)行其他的操作，可以設(shè)置動畫播放多少秒結(jié)束（和制作動畫的人配合，他會告訴你動畫多長時間，或者在lottie網(wǎng)站下的動畫，進(jìn)到編輯頁面可以查看到動畫的幀數(shù)時長），直接進(jìn)行其他的邏輯。
      animationData: animationData,//這里有的可能會報錯，可以使用require的方式
    }
    )
    this.anim.addEventListener('complete', () => { console.log('animation data has loaded') })//監(jiān)聽動畫播放完，進(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)//播放片段  因為沒有ui制作的json，所以直接自己假裝構(gòu)建一個比較自然的動畫
          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(); // 播放該動畫，從目前停止的幀開始播放

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

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

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

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

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

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

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

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(); // 刪除該動畫，移除相應(yīng)的元素標(biāo)簽等。在unmount的時候，需要調(diào)用該方法

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

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

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

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

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

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

destroy: 將在動畫刪除時觸發(fā)