弹簧动画
Spring Physics
元素像挂了弹簧一样冲向目标：可能冲过头，再弹回来停住。
- 又叫：
- 弹性动画
- 回弹
- 物理动画
- 弹性缓动
- spring animation
- overshoot
- bouncy
- 展厅
- 动效与节奏
- 形态
- 固定舞台
- 播放
- 重播
- 关键词
- 需要 JS / 新 CSS 特性 / 合成层动画 / 主线程每帧 / 动效较多 / 可以直接用
参数工作台
复制给 AI
随参数实时更新给这个元素做弹簧动画（spring physics）：用 stiffness 260、damping 18、mass 1 三个参数驱动，目标位置是右侧终点，允许轻微超调但不能晃超过两下，300ms 内停稳。只动 transform，用 requestAnimationFrame 或动画库的 spring 实现，不要每帧改 width/height。prefers-reduced-motion 下直接落到终点。
spring animation, stiffness 260, damping 18, mass 1, overshoot allowed but settle within ~300ms, animate transform: translateX only, driven by requestAnimationFrame or a spring library (Framer Motion / react-spring), no layout-thrashing properties, respect prefers-reduced-motion
https://publieople.github.io/design-museum/entry/spring/?stage=light
链接带着你调好的参数
什么时候用
- 拖拽松手、开关切换、卡片滑出，想让收尾自然而不是硬停
- 想要一点「有性格」的反馈，但又不能拖慢操作
- 弹出层、气泡、跟随手指的元素，需要「被拉住再放开」的手感
适用场景：按钮 / 卡片 / 页面
推荐取值
- 刚度 stiffness
- 170–300（越高越快）
- 阻尼 damping
- 20–35（临界阻尼附近最稳）
- 质量 mass
- 1
- 超调量
- 不超过 8%–10%
- 稳定时间
- 200–400ms 内停稳
别搞混
和「回弹缓动 back-out」的区别
回弹缓动是一条固定的三次贝塞尔曲线，只负责冲过头再回来；弹簧是「刚度 + 阻尼 + 质量」三个参数算出来的运动轨迹，冲几次、冲多远都能调。
和「兜底动画 keyframes」的区别
关键帧是写死的路径，改速度就得重写一堆关键帧；弹簧是每次运行现算，被拖拽打断（中断后也说得通）也能接着算下去。
容易踩的坑
- 参数调软了（刚度低、阻尼小）会左右晃好几秒，用户只想点一下却要等它停下来
- 弹簧靠不断重算数值驱动，别在每一帧里改 width/height 或触发 React 状态更新，用 transform 和 requestAnimationFrame 或动画库做
- 不同库的参数互不通用：Framer Motion 的 stiffness/damping/mass 和 react-spring 的 tension/friction 量纲不一样，不能照抄数值
- prefers-reduced-motion 下要直接落到终点、删掉回弹，别让晕动的用户看它弹三下
无障碍降级
prefers-reduced-motion: reduce 时把弹簧换成 150ms 的线性或用 opacity 淡入，直接跳到最终位置，不播回弹。
关键词
- spring physics
- stiffness
- damping
- mass
- overshoot
- requestAnimationFrame
- linear() easing approximation