// 监听 mousemove，计算按钮与光标偏移量
// 用 anime.js 以弹性缓动驱动按钮偏移
const btn = document.getElementById('magBtn');
const zone = document.getElementById('magnetZone');
zone.addEventListener('mousemove', (e) => {
const rect = zone.getBoundingClientRect();
const cx = rect.left + rect.width / 2;
const cy = rect.top + rect.height / 2;
const dx = (e.clientX - cx) * 0.35;
const dy = (e.clientY - cy) * 0.35;
anime({
targets: btn,
translateX: dx,
translateY: dy,
duration: 150,
easing: 'easeOutQuad'
});
});
zone.addEventListener('mouseleave', () => {
anime({ targets: btn, translateX: 0, translateY: 0,
duration: 500, easing: 'spring(1, 80, 10, 0)' });
});
核心原理
按钮本身固定在 DOM 中，通过 `mousemove` 实时计算光标相对容器中心的偏移量 `dx/dy`，再以 `translateX/Y` 驱动位移。靠近时用 `easeOutQuad` 快速响应；离开时用 `spring` 弹性回到原位。
💡 spring 缓动参数 `(1, 80, 10, 0)` — 刚度高、阻尼足，弹起来短促有力，像真的有重量一样。试试改成 `(1, 200, 12, 0)` 会更软糯。
mousemove
translate
spring easing
实时计算