<template>
  <div class="container">
    <!-- SVG路径作为轨迹 -->
    <svg style="display: none;">
      <path id="path" d="M10 80 L40 50 C60 30 80 80 100 50 S140 20 180 80" />
    </svg>

    <!-- 动画元素 -->
    <div class="box"></div>
  </div>
</template>

<script setup>
import { onMounted } from 'vue';
import { gsap } from 'gsap';

// 手动注册 PathPlugin（GSAP 3.9.0+ 版本内置）
gsap.registerPlugin(gsap.PathPlugin);

console.log('gsap',gsap);


onMounted(() => {
    const box = document.querySelector('.box');
  const path = document.getElementById('path');

  // 创建动画
  gsap.to(box, {
    duration: 5,
    ease: 'power2.inOut',
    motionPath: {
      path: path,       // 绑定 SVG 路径元素
      align: 'start',   // 对齐路径起点（默认值）
      autoRotate: true  // 自动旋转方向（GSAP 3.9.0+ 支持）
    }
  });
});
</script>

<style>
.container {
  position: relative;
  width: 100%;
  height: 600px;
}

.box {
  width: 50px;
  height: 50px;
  background-color: red;
  position: absolute;
  top: 80px; /* 初始位置与SVG路径起点对齐 */
  left: 10px;
}
</style>