弹性Spring
视觉效果与操作状态用物理参数做出回弹和过冲效果
弹性动画通过刚度、阻尼和质量计算运动，适合拖拽回弹和少量强调。它通常需要动画库或近似曲线，不适合严肃确认、持续阅读，也不应该让所有元素一起弹动。
冲过目标线再回来：过冲（overshoot）+ 回弹
什么时候用
- 拖拽松手回弹：卡片、列表跟着手势，物理感最对👆松手 ↩拖拽松手，弹性回原位
- 弹窗 Modal、面板入场：轻微过冲，活泼不轻浮入场轻微过冲，活泼不轻浮
- 两个参数调手感：刚度管多快，阻尼管晃几下刚度阻尼刚度管多快，阻尼管晃几下
- Framer Motion：弹簧是默认手感，一行配置就有type: "spring"Framer Motion 一行配置就是弹簧
什么时候不用
- 弹三四次才停：活泼变轻浮，质感全无弹三四次才停，活泼变轻浮
- 严肃场景用弹性：大额转账确认弹跳着进来，谁敢点确认转账 ¥50,000？取消确认
- 阻尼太小：晃个不停收不住，像果冻阻尼太小，晃个不停收不住
- 每个元素都弹：动画不是越多越好，有目的才高级不是越多越好：每个元素都弹，页面像果冻
组成结构 · Anatomy
刚度 stiffness阻尼 damping目标值
1刚度Stiffness弹簧多硬，决定运动多快
2阻尼Damping摩擦力多大，决定晃几下停
3过冲Overshoot冲过目标再回来，活感的来源
4目标值Target最终停住的位置
常见变体 · Variants
硬弹簧Stiff
干脆利落，工具型产品
软弹簧Soft
温和活泼，内容社交产品
无过冲No Bounce
要活感但不要回弹
典型使用场景
拖拽松手回弹
原来的位置
首页改版走查
拖拽中…松手回弹
spring：松手冲回原位，轻轻过冲再停稳，像有物理质量
弹窗活泼入场
scale 冲过 1 一点点再弹回（残影是上一帧），活泼但一次就停
开关拨动手感
通知提醒
滑块冲过头 2px 再弹回（左侧残影是轨迹），手感才“活”
下拉菜单展开
进行中
▾
全部状态
进行中
已完成
从触发点弹性展开：scale 0.96 → 1，虚线是上一帧