<template>
  <div class="animation-container">
    <!-- 動(dòng)畫(huà)容器：用于承載 Lottie 渲染的動(dòng)畫(huà) -->
    <div ref="lottieRef" class="lottie-box"></div>
  </div>
</template>

<script>
// 1. 引入 Lottie 庫(kù)
import lottie from 'lottie-web';

export default {
  name: 'LottieAnimation',
  data() {
    return {
      animationInstance: null, // 存儲(chǔ)動(dòng)畫(huà)實(shí)例（用于后續(xù)控制）
    };
  },
  mounted() {
    // 2. 組件掛載后初始化動(dòng)畫(huà)
    this.initLottie();
  },
  beforeUnmount() {
    // 3. 組件銷(xiāo)毀前釋放動(dòng)畫(huà)資源（避免內(nèi)存泄漏）
    if (this.animationInstance) {
      this.animationInstance.destroy();
    }
  },
  methods: {
    initLottie() {
      // 加載 JSON 動(dòng)畫(huà)并渲染
      this.animationInstance = lottie.loadAnimation({
        container: this.$refs.lottieRef, // 動(dòng)畫(huà)容器（通過(guò) ref 獲取 DOM）
        renderer: 'svg', // 渲染方式：svg（推薦，矢量無(wú)損）/ canvas / html
        loop: true, // 是否循環(huán)播放（true/false/數(shù)字，如 3 表示循環(huán)3次）
        autoplay: true, // 是否自動(dòng)播放
        // 兩種加載 JSON 的方式（二選一）：
        path: require('@/assets/animations/menu.json'), // 方式1：通過(guò)路徑加載（推薦，支持按需加載）
        // animationData: require('@/assets/animations/menu.json'), // 方式2：直接導(dǎo)入 JSON 數(shù)據(jù)（適合小文件）
      });

      // 可選：監(jiān)聽(tīng)動(dòng)畫(huà)事件（如播放完成、幀變化）
      this.animationInstance.addEventListener('complete', () => {
        console.log('動(dòng)畫(huà)播放完成（僅非循環(huán)時(shí)觸發(fā)）');
      });
    },
  },
};
</script>

<style scoped>
.animation-container {
  /* 父容器樣式，根據(jù)布局調(diào)整 */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.lottie-box {
  /* 動(dòng)畫(huà)尺寸：與設(shè)計(jì)稿一致，支持百分比/固定像素 */
  width: 60px; 
  height: 60px;
  cursor: pointer; /* 如需點(diǎn)擊交互，添加指針樣式 */
}
</style>

<template>
  <div class="interactive-animation">
    <!-- 動(dòng)畫(huà)容器 -->
    <div ref="lottieRef" class="lottie-box" @click="toggleAnimation"></div>
    <!-- 控制按鈕 -->
    <div class="control-buttons">
      <button @click="playAnimation">播放</button>
      <button @click="pauseAnimation">暫停</button>
      <button @click="reverseAnimation">反向播放</button>
    </div>
  </div>
</template>

<script>
import lottie from 'lottie-web';

export default {
  name: 'InteractiveLottie',
  data() {
    return {
      animationInstance: null,
      isPlaying: true, // 標(biāo)記當(dāng)前是否在播放
    };
  },
  mounted() {
    this.initLottie();
  },
  beforeUnmount() {
    if (this.animationInstance) {
      this.animationInstance.destroy();
    }
  },
  methods: {
    initLottie() {
      this.animationInstance = lottie.loadAnimation({
        container: this.$refs.lottieRef,
        renderer: 'svg',
        loop: false, // 關(guān)閉自動(dòng)循環(huán)（手動(dòng)控制）
        autoplay: true,
        path: require('@/assets/animations/menu.json'),
      });

      // 監(jiān)聽(tīng)播放狀態(tài)變化
      this.animationInstance.addEventListener('play', () => {
        this.isPlaying = true;
      });
      this.animationInstance.addEventListener('pause', () => {
        this.isPlaying = false;
      });
    },

    // 1. 點(diǎn)擊動(dòng)畫(huà)容器切換播放/暫停
    toggleAnimation() {
      if (this.isPlaying) {
        this.animationInstance.pause();
      } else {
        this.animationInstance.play();
      }
    },

    // 2. 播放動(dòng)畫(huà)
    playAnimation() {
      this.animationInstance.play();
    },

    // 3. 暫停動(dòng)畫(huà)
    pauseAnimation() {
      this.animationInstance.pause();
    },

    // 4. 反向播放動(dòng)畫(huà)
    reverseAnimation() {
      this.animationInstance.setDirection(-1); // 設(shè)置方向：-1 反向，1 正向
      this.animationInstance.play();
    },
  },
};
</script>

<style scoped>
.interactive-animation {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  padding: 20px;
}

.lottie-box {
  width: 80px;
  height: 80px;
}

.control-buttons {
  display: flex;
  gap: 10px;
}

button {
  padding: 6px 12px;
  border: 1px solid #1890ff;
  background: #fff;
  color: #1890ff;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;
}

button:hover {
  background: #1890ff;
  color: #fff;
}
</style>