弹性Spring
你可能会说
弹窗出现时带一点回弹，像弹簧那样轻轻晃一下。
弹性动画是一种用刚度、阻尼和质量等物理参数计算运动的动效方式拖拽卡片松手后的回弹可使用 spring，通过参数控制速度、过冲和停止方式。CSS transition 没有通用原生 spring 类型，通常需要动画库或经过设计的缓动 Easing近似；它不适合严肃确认、持续阅读或让所有元素同时弹动。
也常被叫作弹簧动画回弹动效Spring Animation
什么时候用
- 拖拽松手回弹：卡片、列表跟着手势，物理感最对👆松手 ↩拖拽松手，弹性回原位
- 弹窗 Modal、面板入场：需要轻快语气时可用轻微过冲；严肃或高风险流程应保持稳定轻微过冲可用于需要活力的低风险入场
- 按实现的参数调手感：常见有刚度、阻尼、质量、初速度或时长；不同库的模型与默认值不同刚度阻尼刚度影响响应速度，阻尼影响振荡衰减
- Framer Motion：弹簧是默认手感，一行配置就有type: "spring"Framer Motion 可通过该配置启用弹簧模型
什么时候不用
- 反复回弹：会延迟稳定状态，并分散用户对任务的注意反复回弹会延迟稳定状态并分散注意
- 高风险确认使用明显弹性：回弹可能分散注意力；优先保证信息与操作状态稳定清楚确认转账 ¥50,000？取消确认
- 阻尼过小：可能造成持续振荡，状态难以及时稳定阻尼过小会让振荡持续过久
- 每个元素都弹：会削弱层级；只在有明确反馈目的时使用所有元素同时回弹，会削弱层级与重点
组成结构 · Anatomy
刚度 stiffness阻尼 damping目标值
弹簧多硬，决定运动多快
摩擦力多大，决定晃几下停
数值短暂越过目标后回到稳定位置
最终停住的位置
常见变体 · Variants
硬弹簧Stiff
干脆利落，工具型产品
软弹簧Soft
温和活泼，内容社交产品
无过冲No Bounce
要活感但不要回弹
典型使用场景
拖拽松手回弹
原来的位置
首页改版走查
拖拽中…松手回弹
spring：松手冲回原位，轻轻过冲再停稳，像有物理质量
弹窗活泼入场
scale 短暂越过 1 后回到稳定值；残影表示上一帧位置
开关拨动手感
通知提醒
滑块短暂越过目标位置后回弹；左侧残影表示运动轨迹
下拉菜单展开
进行中
▾
全部状态
进行中
已完成
从触发点弹性展开：scale 0.96 → 1，虚线是上一帧