Jelly Drag 弹性拖拽球
Drag the ball anywhere, let go, and it springs back to the centre — no keyframes involved. 把球拖到任意位置松手,它会弹回中心——整个过程没有关键帧。
Runs live on this page. Move the pointer, click, or drag — whichever the effect listens for. 就在本页实时运行。移动鼠标、点击或拖拽——看它响应哪一种。
How it works原理拆解
While dragging, the ball simply follows the pointer. On release, acceleration is (centre - position) * 0.05 and velocity is damped by 0.88 each frame. That combination is a spring-damper: the 0.05 sets stiffness and 0.88 sets how quickly the overshoot dies out. 拖拽时球直接跟随指针。松手后加速度是 (中心 − 当前位置) * 0.05,速度每帧乘 0.88 衰减。这就是一个弹簧-阻尼系统:0.05 决定劲度,0.88 决定过冲多久消失。
What to change可以改的地方
- 1Lower the damping to 0.8 for a bouncier, rubber-band release.
- 2Raise 0.05 to 0.15 and the ball snaps back aggressively.
- 1阻尼降到 0.8,回弹更弹、更像橡皮筋。
- 20.05 提到 0.15,球会「啪」地一下收回去。
Source code源码
Self-contained — paste it into any HTML file and it runs. No libraries. 完全独立——粘进任意 HTML 文件就能跑,不需要任何库。