gsap-MotionPath

   // 注册MotionPath插件
        gsap.registerPlugin(MotionPathPlugin);

        // 波浪路径动画
        function playPath1() {
            gsap.to(".box", {
                duration: 3,          // 动画持续时间3秒
                motionPath: {
                    path: "#path1",   // 使用ID为path1的SVG路径
                    align: "#path1",  // 元素对齐到路径
                    autoRotate: true, // 自动旋转以跟随路径方向
                    alignOrigin: [0.5, 0.5] // 对齐点设置在元素中心
                },
                ease: "power1.inOut", // 缓动效果：渐入渐出
                repeat: -1,          // 无限重复
                yoyo: true          // 动画往返播放
            });
        }

        // 圆形路径动画
        function playPath2() {
            gsap.to(".box", {
                duration: 5,          // 动画持续时间5秒
                motionPath: {
                    path: "#path2",   // 使用ID为path2的SVG路径
                    align: "#path2",  // 元素对齐到路径
                    autoRotate: true, // 自动旋转以跟随路径方向
                    alignOrigin: [0.5, 0.5] // 对齐点设置在元素中心
                },
                ease: "none",        // 无缓动效果（匀速运动）
                repeat: -1           // 无限重复
            });
        }

        // 心形路径动画
        function playPath3() {
            gsap.to(".box", {
                duration: 4,          // 动画持续时间4秒
                motionPath: {
                    path: "#path3",   // 使用ID为path3的SVG路径
                    align: "#path3",  // 元素对齐到路径
                    autoRotate: true, // 自动旋转以跟随路径方向
                    alignOrigin: [0.5, 0.5] // 对齐点设置在元素中心
                },
                ease: "power1.inOut", // 缓动效果：渐入渐出
                repeat: -1           // 无限重复
            });
        }

        // 默认播放第一个动画
        playPath1();