gsap-交互动画

  // 磁性按钮效果
        const button = document.querySelector('.magnetic-button');
        const buttonRect = button.getBoundingClientRect();
        const buttonCenterX = buttonRect.left + buttonRect.width / 2;
        const buttonCenterY = buttonRect.top + buttonRect.height / 2;

        document.addEventListener('mousemove', (e) => {
            const mouseX = e.clientX;
            const mouseY = e.clientY;
            const distX = mouseX - buttonCenterX;
            const distY = mouseY - buttonCenterY;
            const distance = Math.sqrt(distX * distX + distY * distY);

            if (distance < 200) { // 鼠标在按钮200px范围内时产生磁性效果
                const strength = (200 - distance) / 200; // 越近效果越强
                gsap.to(button, {
                    duration: 0.3,          // 动画持续时间0.3秒
                    x: distX * strength * 0.3,  // X轴位移，基于鼠标距离和强度计算
                    y: distY * strength * 0.3,  // Y轴位移，基于鼠标距离和强度计算
                    ease: "power2.out"      // 缓动效果：平滑减速
                });
            } else {
                gsap.to(button, {
                    duration: 0.3,
                    x: 0,
                    y: 0,
                    ease: "power2.out"
                });
            }
        });

        // 浮动元素效果
        const elements = document.querySelectorAll('.element');
        elements.forEach((element, index) => {
            // 初始随机位置
            gsap.set(element, {
                x: Math.random() * 100 - 50,  // X轴随机位置，范围-50到50
                y: Math.random() * 100 - 50   // Y轴随机位置，范围-50到50
            });

            // 持续浮动动画
            gsap.to(element, {
                duration: 2 + index,    // 动画持续时间2秒加上索引值
                x: "+=30",             // X轴相对当前位置移动30像素
                y: "+=30",             // Y轴相对当前位置移动30像素
                rotation: 360,         // 旋转360度
                ease: "none",          // 无缓动效果（匀速运动）
                repeat: -1,            // 无限重复
                yoyo: true            // 动画往返播放
            });

            // 鼠标悬停效果
            element.addEventListener('mouseenter', () => {
                gsap.to(element, {
                    duration: 0.3,         // 动画持续时间0.3秒
                    scale: 1.5,           // 放大到1.5倍
                    backgroundColor: '#2ecc71',  // 改变背景色为绿色
                    ease: "back.out(1.7)"  // 回弹缓动效果，1.7是回弹强度
                });
            });

            element.addEventListener('mouseleave', () => {
                gsap.to(element, {
                    duration: 0.3,
                    scale: 1,
                    backgroundColor: '#e74c3c',
                    ease: "back.out(1.7)"
                });
            });

            // 点击效果
            element.addEventListener('click', () => {
                gsap.to(element, {
                    duration: 0.5,         // 动画持续时间0.5秒
                    scale: 0.5,           // 缩小到0.5倍
                    opacity: 0,           // 完全透明
                    rotation: 180,        // 旋转180度
                    ease: "power2.in",    // 缓动效果：渐快
                    onComplete: () => {    // 动画完成时的回调函数
                        gsap.to(element, {
                            duration: 0,    // 立即执行
                            scale: 1,      // 恢复原始大小
                            opacity: 1,    // 恢复完全不透明
                            rotation: 0    // 恢复原始角度
                        });
                    }
                });
            });
        });

        // 创建随机漂浮的卡片
        for(let i = 0; i < 5; i++) {
            const card = document.createElement('div');
            card.className = 'card';
            card.textContent = `卡片 ${i + 1}`;
            document.body.appendChild(card);

            // 随机位置
            gsap.set(card, {
                x: Math.random() * window.innerWidth,
                y: Math.random() * window.innerHeight
            });

            // 漂浮动画
            gsap.to(card, {
                duration: 3 + Math.random() * 2,
                x: "+=100",
                y: "+=100",
                rotation: Math.random() * 360,
                ease: "none",
                repeat: -1,
                yoyo: true
            });

            // 鼠标悬停效果
            card.addEventListener('mouseenter', () => {
                gsap.to(card, {
                    duration: 0.3,
                    scale: 1.1,
                    rotation: 0,
                    ease: "power2.out"
                });
            });

            card.addEventListener('mouseleave', () => {
                gsap.to(card, {
                    duration: 0.3,
                    scale: 1,
                    ease: "power2.out"
                });
            });
        }