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

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

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

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

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

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

<template>
  <div class="interactive-animation">
    <!-- 動畫容器 -->
    <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, // 標記當前是否在播放
    };
  },
  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)閉自動循環(huán)（手動控制）
        autoplay: true,
        path: require('@/assets/animations/menu.json'),
      });

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

    // 1. 點擊動畫容器切換播放/暫停
    toggleAnimation() {
      if (this.isPlaying) {
        this.animationInstance.pause();
      } else {
        this.animationInstance.play();
      }
    },

    // 2. 播放動畫
    playAnimation() {
      this.animationInstance.play();
    },

    // 3. 暫停動畫
    pauseAnimation() {
      this.animationInstance.pause();
    },

    // 4. 反向播放動畫
    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>