返回知识库

产品与设计 · 动效

弹簧动画Spring

用质量、阻尼和初速度控制带弹性的运动,限制过冲和时长;只 transform 已占位的面板,并为减少动效提供瞬切到终态的替代。

拖三参数,看对话框的过冲与稳定

删除对话框弹层进入。拖质量/阻尼/初速度,点「播放进入」,读对话框上的过冲标尺和稳定旗标;播放中可「立即稳定」打断弹簧,勾选减少动效则瞬切到终态。

场景:删除对话框弹层进入。拖三个物理参数,点「播放进入」,读对话框上的过冲标尺和稳定旗标;播放中点「立即稳定」可打断弹簧,勾选减少动效则瞬切到终态。

删除项目?

待播放面板在目标上方 48px

移到回收站,30 天内可恢复。

峰值过冲0px上限 22px

拖质量/阻尼/初速度,看对话框上的过冲标尺和稳定旗标怎么变;下一步点「播放进入」开始。

面板里测到的结论怎么用

刚才在对话框上看到的三参数和边界,提炼成可复用的判断。

  • 质量↑ 惯性更大:面板反应更慢、过冲更久、稳定时间更长。
  • 阻尼↑ 收敛更快:过冲更小、更早稳定;过低则反复抖、迟迟不落位。
  • 初速度↑ 冲劲更大:过冲明显增大,容易冲过目标位置。
  • 过冲和总时长要受限(这里用 22px / 1200ms 上限),移动端和低性能设备不会无限抖。
  • 只 transform 已占位的面板,周围布局尺寸不变;动画不承载成功/失败语义。
  • 弹簧可被打断并落到正确终态,操作不依赖 animationend;减少动效时瞬切,内容与焦点照常可用。

什么时候用弹簧

弹层、抽屉、卡片出现需要表达空间关系时适合;不要用它承载操作结果或加载语义。

适合

模态对话框、底部抽屉、卡片出现——物体从某处「来到」目标位置,轻微回弹交代空间关系。

不当万能解

保存成功/失败、加载等待、按钮反馈不要靠弹簧表达;那些用文字、状态码或即时变化更准确。

正反例:受控回弹 vs 过冲超限

同一个对话框进入——差异只在参数是否受控,以及能否被打断、能否在减少动效时瞬切。

正例轻初速 · 够阻尼 · 可打断

对话框用较小初速度和足够阻尼进入,过冲在 22px 内、约 1s 稳定;只用 transform 移动已占位的面板,周围布局不抖。播放中点「立即稳定」会立刻落到终态,不依赖动画放完。

差异:参数受控、终态可达、布局不动。
反例速度 6 · 阻尼 1

初速度拉满、阻尼降到最低,面板冲过目标几十像素反复抖,超过 1.2s 仍在晃;或动画没结束就阻塞操作,用户开了减少动效也还在弹。

差异:只改参数——过冲超限、终态迟迟不可达。

快速自测

用户开了「减少动效」,你的弹簧对话框该怎么进入?

继续查证

术语的技术定义和行为以这些一手或权威资料为准。

下一步学

和本知识点经常一起出现的概念。