MOVE · 移动交互
参数调改
PLAYGROUND
吸附强度--strength
0.051
作用半径--radius_px
80320
回弹时长--return_ms
120900
回弹曲线--ease
按钮底色--btn_bg
按钮文字色--btn_text
实现要点
NOTES- 01
吸附中心取『未变形的槽位』而非按钮实时 rect:按钮 transform 后 rect 会跟着移动,直接用会导致反馈振荡抖动。
- 02
两段手感分离:跟随阶段用 90ms 短过渡让位移像『被吸住』;离开半径或移出区域时切换到 --return_ms + 过冲曲线的回弹过渡。
- 03
作用半径 --radius_px 内才吸附、出圈立即释放;半径建议与按钮尺寸同量级(100-260px),过大像拖拽、过小吸不住。
- 04
标签层做 0.45 倍视差位移,两层速度差制造厚度感;全部只动 transform,不触发布局。
- 05
移动端无 hover:降级为按下时向触点偏移一次,或直接保持静态;requestAnimationFrame 节流可省(mousemove 已按帧触发)。
- 06
预览空闲演示:光标离开区域约 3s 后 JS 随机方向模拟一次『吸附-回弹』(700ms 慢过渡 + 过冲回弹),用户回到区域立即让位给真实交互。
源代码
SOURCE
加载源代码…