MOTION HUB

磁吸按钮

Magnetic Button
#magnetic-button · 33/72
MOVE · 移动交互

参数调改

PLAYGROUND
吸附强度--strength
0.051
作用半径--radius_px
80320
px
回弹时长--return_ms
120900
ms
回弹曲线--ease
按钮底色--btn_bg
按钮文字色--btn_text

实现要点

NOTES
  1. 01

    吸附中心取『未变形的槽位』而非按钮实时 rect:按钮 transform 后 rect 会跟着移动,直接用会导致反馈振荡抖动。

  2. 02

    两段手感分离:跟随阶段用 90ms 短过渡让位移像『被吸住』;离开半径或移出区域时切换到 --return_ms + 过冲曲线的回弹过渡。

  3. 03

    作用半径 --radius_px 内才吸附、出圈立即释放;半径建议与按钮尺寸同量级(100-260px),过大像拖拽、过小吸不住。

  4. 04

    标签层做 0.45 倍视差位移,两层速度差制造厚度感;全部只动 transform,不触发布局。

  5. 05

    移动端无 hover:降级为按下时向触点偏移一次,或直接保持静态;requestAnimationFrame 节流可省(mousemove 已按帧触发)。

  6. 06

    预览空闲演示:光标离开区域约 3s 后 JS 随机方向模拟一次『吸附-回弹』(700ms 慢过渡 + 过冲回弹),用户回到区域立即让位给真实交互。

源代码

SOURCE

加载源代码…