npm install vue-lottie@latest
# 或
yarn add vue-lottie

<template>
  <lottie :options="lottieOptions" :height="400" :width="400" @animCreated="handleAnimation" />
</template>
<script>
import Lottie from 'vue-lottie';
import * as animationData from './animation.json';//animationData.json文件找ui生成
export default {
  components: { Lottie },
  data() {
    return {
      lottieOptions: {
        animationData: animationData,
        loop: true,
        autoplay: true,
      }
    };
  },
  methods: {
    handleAnimation(anim) {
      this.animation = anim; // 保存動畫實(shí)例
    }
  }
};
</script>

methods: {
  //@animCreated創(chuàng)建實(shí)例
  handleAnimation(anim) {
    this.anim = anim;
  },
  play() {
    // 播放動畫（從當(dāng)前幀開始）
    //如果動畫已結(jié)束，會從頭開始播放
    this.anim.play();
  },
  pause() {
    //暫停動畫（保持當(dāng)前幀）
    //再次調(diào)用 play() 會從暫停處繼續(xù)
    this.anim.pause();
  },
  stop() {
    //停止動畫（重置到第一幀）
    //與 pause() 不同，stop() 會回到起始狀態(tài)
    this.anim.stop();
  },
  setSpeed(speed) {
    //設(shè)置播放速度
    //@param {Number} speed - 1=正常速度，2=2倍速，0.5=半速
    this.anim.setSpeed(speed); 
  },
  goToAndPlay(frame=500) {
    //跳轉(zhuǎn)到指定時(shí)間/幀并播放
    //@param {Number} frame - 時(shí)間（毫秒）或幀數(shù)
    //@param {Boolean} [isFrame=false] - true=按幀跳轉(zhuǎn)，false=按時(shí)間跳轉(zhuǎn)
    this.anim.goToAndPlay(frame, true); // 跳轉(zhuǎn)到第500幀并播放
  },
  goToAndStop(frame) {
    //跳轉(zhuǎn)到指定時(shí)間/幀并停止
    //@param {Number} frame - 時(shí)間（毫秒）或幀數(shù)
    //@param {Boolean} [isFrame=false] - 是否按幀跳轉(zhuǎn)
    this.anim.goToAndStop(frame, false);
  },
  playSegments(segments) {
    //播放指定片段
    //@param {Array} segments - 片段范圍 [startFrame, endFrame] 或 [[seg1], [seg2]]
    //@param {Boolean} [forceFlag=false] - true=立即跳轉(zhuǎn)，false=完成當(dāng)前動畫后跳轉(zhuǎn)
    // 播放10~20幀
    this.anim.playSegments([10, 20], true);
    // 多片段順序播放
    this.anim.playSegments([[0, 10], [20, 30]], true);
  },
  setSegment() {
    //設(shè)置動畫播放區(qū)間（不立即生效，需配合 play()）
    //@param {Number} startFrame - 起始幀
    //@param {Number} endFrame - 結(jié)束幀
    this.anim.setSegment(50, 100);
    this.anim.play(); // 播放50~100幀
  },
  freeze() {
    //凍結(jié)動畫（停止渲染但保留進(jìn)度）
    //比 pause() 更節(jié)省資源，適合隱藏時(shí)的動畫
    this.anim.freeze();
  },
  unfreeze() {
    //解凍動畫（恢復(fù)渲染）
    //配合 freeze() 使用，恢復(fù)時(shí)保持原有進(jìn)度
    this.anim.unfreeze();
  },
  destroy() {
    //銷毀動畫實(shí)例，釋放內(nèi)存
    //組件卸載時(shí)建議調(diào)用
    this.anim.destroy();
  },
//屬性獲取
  getDuration() {
    //獲取動畫總時(shí)長/總幀數(shù)
    //@param {Boolean} [isFrame=false] - true=返回總幀數(shù)，false=返回總時(shí)間（毫秒）
    //@returns {Number}
    const totalFrames = this.anim.getDuration(true); // 獲取總幀數(shù)
    const totalTime = this.anim.getDuration(); // 獲取總時(shí)長（ms）
  },
  getCurrentTime() {
    //獲取當(dāng)前播放時(shí)間（毫秒）
    //@returns {Number}
    const currentTime = this.anim.getCurrentTime();
  },
//事件監(jiān)聽
  addEventListener() {
    //添加事件監(jiān)聽
    //@param {String} type - 事件類型（見下方事件列表）
    //@param {Function} callback - 回調(diào)函數(shù)
    this.anim.addEventListener('complete', () => {
      console.log('動畫播放完成');
    });
  },
}

async loadAnimation() {
  const response = await fetch('/api/get-animation');
  this.lottieOptions.animationData = await response.json();
}

// 播放特定片段
this.anim.playSegments([10, 20], true);
// 監(jiān)聽片段結(jié)束
this.anim.addEventListener('segmentStart', () => {
  console.log('Segment started');
});

<lottie 
  :options="lottieOptions" 
  :width="windowWidth > 768 ? 500 : 300" 
  :height="windowWidth > 768 ? 500 : 300" 
/>

<lottie v-if="showAnimation" :options="lottieOptions" />

this.anim.freeze(); // 暫停并隱藏動畫以釋放資源

<lottie ref="lottie" :options="{ autoplay: false }" />
<button @click="$refs.lottie.play()">播放</button>

// 動態(tài)修改動畫顏色
this.anim.setSubframe(false);
this.anim.updateDocumentData({
  layers: [{ 
    shapes: [{ 
      c: { k: isDark ? [0,0,0] : [255,255,255] } 
    }] 
  }]
});