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; // 保存動畫實例
    }
  }
};
</script>

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