Spring Animation new 弹簧动画（Spring Animation） web
Physics-based motion that overshoots the target and settles
基于物理的运动：冲过目标，再缓缓停稳
标本可交互 —— 点点看。Specimen is live — try it.
Anatomy — every part, named解剖 —— 每个部件的名字
-
1 Overshoot过冲（Overshoot）
damping“Where it goes past the line and comes back” is the overshoot — damping controls how much of it survives.
“冲过那条线又回来”的部分就是过冲 —— damping 决定过冲能保留多少。
Prompt fragmentPrompt 片段the spring's overshoot: the travel past the resting position before settling — tune with damping (higher = less overshoot)
弹簧的过冲：停稳之前冲过静止位置的那段行程 —— 用 damping 调节（越大过冲越小）
Prompt — paste into your agentPrompt —— 直接粘贴给你的代理
Give this animation spring physics: use Motion's transition={{ type: "spring", stiffness: 300, damping: 22 }} (or react-spring) instead of a duration+easing pair — the element should slightly overshoot its target and settle; raise damping to kill wobble, raise stiffness for snap. For pure CSS, bake the spring into a linear() timing function.
给这个动画加上弹簧物理：用 Motion 的 transition={{ type: "spring", stiffness: 300, damping: 22 }}（或 react-spring）代替 duration + easing 组合 —— 元素应稍微冲过目标再停稳；增大 damping 消除晃动，增大 stiffness 更利落。纯 CSS 方案：把弹簧烘进 linear() 时间函数。
Debug prompt — when it misbehaves调试 Prompt —— 当它不听话时
Debug my spring animation (Motion type: "spring", react-spring, CSS linear()). Rule out: damping too low so it wobbles like jelly; stiffness too low so it feels underwater; a duration fighting the physics (springs compute their own settle time); the overshoot clipped by an overflow-hidden parent; interruptions snapping because the spring restarts from the target instead of retargeting from current velocity. The symptom:
调试我的弹簧动画（Motion type: "spring"、react-spring、CSS linear()）。逐项排除：damping 太小，晃得像果冻；stiffness 太小，动得像在水里；duration 和物理打架（弹簧自己算停稳时间）；过冲被 overflow-hidden 的父元素裁掉；打断时生硬跳变，因为弹簧从目标点重启，而不是带着当前速度重新定向。症状是：
In code代码里叫什么
| Framework框架 | Symbol符号 | Note说明 |
|---|---|---|
| Motion | transition={{ type: "spring", stiffness, damping }} | no duration — the physics decide when it stops没有 duration —— 什么时候停由物理说了算 |
| CSS | linear(…) | a spring baked into keypoints — springs as pure CSS把弹簧烘进关键点的曲线 —— 纯 CSS 实现弹簧 |
| React | react-spring | |
| SwiftUI | .spring(response:dampingFraction:) | the same idea on Apple platformsApple 平台上的同款思路 |