# npm
npm install lottie-web --save

# yarn
yarn add lottie-web

# pnpm
pnpm add lottie-web

<template>
  <!-- 動(dòng)畫容器，需指定寬高 -->
  <div ref="lottieContainer" class="lottie-container" :style="{ width, height }"></div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, watch } from 'vue';
import lottie from 'lottie-web';

// 定義 Props
const props = defineProps({
  // 動(dòng)畫 JSON 文件路徑
  animationData: {
    type: Object,
    required: false,
    default: null
  },
  path: {
    type: String,
    required: false,
    default: ''
  },
  // 動(dòng)畫寬高
  width: {
    type: String,
    default: '300px'
  },
  height: {
    type: String,
    default: '300px'
  },
  // 是否自動(dòng)播放
  autoplay: {
    type: Boolean,
    default: true
  },
  // 是否循環(huán)播放
  loop: {
    type: Boolean,
    default: true
  },
  // 動(dòng)畫速度（1 為正常速度）
  speed: {
    type: Number,
    default: 1
  },
  // 渲染方式（svg/canvas/html），優(yōu)先 svg（矢量）
  renderer: {
    type: String,
    default: 'svg',
    validator: (val) => ['svg', 'canvas', 'html'].includes(val)
  }
});

// 定義 Emits：暴露動(dòng)畫狀態(tài)事件
const emit = defineEmits(['complete', 'loopComplete', 'enterFrame']);

// 動(dòng)畫容器 Ref
const lottieContainer = ref(null);
// Lottie 實(shí)例
let lottieInstance = null;

// 初始化動(dòng)畫
const initLottie = () => {
  if (!lottieContainer.value) return;

  // 銷毀舊實(shí)例（避免重復(fù)渲染）
  if (lottieInstance) {
    lottieInstance.destroy();
  }

  // 創(chuàng)建 Lottie 實(shí)例
  lottieInstance = lottie.loadAnimation({
    container: lottieContainer.value, // 動(dòng)畫容器
    animationData: props.animationData, // 動(dòng)畫 JSON 數(shù)據(jù)（本地導(dǎo)入）
    path: props.path, // 動(dòng)畫 JSON 文件路徑（遠(yuǎn)程/ public 目錄）
    renderer: props.renderer, // 渲染方式
    loop: props.loop, // 循環(huán)播放
    autoplay: props.autoplay, // 自動(dòng)播放
    name: 'lottie-animation' // 動(dòng)畫名稱（可選）
  });

  // 設(shè)置動(dòng)畫速度
  lottieInstance.setSpeed(props.speed);

  // 監(jiān)聽動(dòng)畫事件
  lottieInstance.addEventListener('complete', () => {
    emit('complete'); // 動(dòng)畫播放完成
  });
  lottieInstance.addEventListener('loopComplete', () => {
    emit('loopComplete'); // 動(dòng)畫循環(huán)完成
  });
  lottieInstance.addEventListener('enterFrame', (e) => {
    emit('enterFrame', e); // 動(dòng)畫每一幀
  });
};

// 監(jiān)聽 Props 變化，重新初始化
watch(
  [() => props.path, () => props.animationData, () => props.loop, () => props.speed],
  () => {
    initLottie();
  },
  { immediate: true }
);

// 組件卸載時(shí)銷毀實(shí)例
onUnmounted(() => {
  if (lottieInstance) {
    lottieInstance.destroy();
    lottieInstance = null;
  }
});
</script>

<style scoped>
.lottie-container {
  display: inline-block;
  overflow: hidden;
}
</style>

<template>
  <div class="demo-page">
    <h2>Lottie 基礎(chǔ)使用示例</h2>
    <LottieAnimation
      path="/lottie/animation.json"
      width="200px"
      height="200px"
      :loop="false"
      :speed="1.2"
      @complete="handleAnimationComplete"
    />
  </div>
</template>

<script setup>
import LottieAnimation from '@/components/LottieAnimation.vue';

// 動(dòng)畫播放完成回調(diào)
const handleAnimationComplete = () => {
  console.log('動(dòng)畫播放完成！');
};
</script>

<template>
  <div class="demo-page">
    <LottieAnimation
      :animation-data="animationData"
      width="200px"
      height="200px"
      :autoplay="false"
      ref="lottieRef"
    />
    <button @click="playAnimation">播放動(dòng)畫</button>
    <button @click="pauseAnimation">暫停動(dòng)畫</button>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import LottieAnimation from '@/components/LottieAnimation.vue';
// 導(dǎo)入本地 JSON 動(dòng)畫文件
import animationData from '@/assets/lottie/animation.json';

const animationData = ref(animationData);
const lottieRef = ref(null);

// 播放動(dòng)畫
const playAnimation = () => {
  lottieRef.value.lottieInstance.play();
};

// 暫停動(dòng)畫
const pauseAnimation = () => {
  lottieRef.value.lottieInstance.pause();
};
</script>

// 播放動(dòng)畫
lottieInstance.play();

// 暫停動(dòng)畫
lottieInstance.pause();

// 停止動(dòng)畫（重置到第一幀）
lottieInstance.stop();

// 跳轉(zhuǎn)到指定幀（frameNum 為幀編號(hào)）
lottieInstance.goToAndStop(frameNum, true);

// 跳轉(zhuǎn)到指定幀并播放
lottieInstance.goToAndPlay(frameNum, true);

// 設(shè)置速度（0.5 為慢放，2 為快放）
lottieInstance.setSpeed(0.5);

// 獲取當(dāng)前速度
const currentSpeed = lottieInstance.playSpeed;

// 設(shè)置循環(huán)次數(shù)（0 為無限循環(huán)，1 為播放 1 次）
lottieInstance.loop = 0;

// 單獨(dú)設(shè)置循環(huán)（立即生效）
lottieInstance.setLoop(true); // 無限循環(huán)
lottieInstance.setLoop(3); // 循環(huán) 3 次

<template>
  <LottieAnimation
    path="/lottie/animation.json"
    @enterFrame="handleEnterFrame"
  />
  <input
    type="range"
    min="0"
    max="100"
    v-model="progress"
    @input="handleProgressChange"
  />
</template>

<script setup>
import { ref } from 'vue';

const progress = ref(0);
let totalFrames = 0;

// 監(jiān)聽每一幀，更新進(jìn)度
const handleEnterFrame = (e) => {
  totalFrames = e.totalFrames;
  progress.value = Math.floor((e.currentFrame / totalFrames) * 100);
};

// 拖動(dòng)進(jìn)度條，跳轉(zhuǎn)動(dòng)畫
const handleProgressChange = () => {
  const targetFrame = (progress.value / 100) * totalFrames;
  lottieInstance.goToAndPlay(targetFrame, true);
};
</script>