缓动曲线和弹簧动画怎么选？
一句话做出判断
缓动曲线会按设定好的节奏移动。弹簧动画像真的弹簧，会自己慢慢停下来。
淡入淡出、颜色变化和固定步骤，用缓动曲线。对象移动或跟随拖动时，用弹簧动画。
看看每个界面模式会做什么
先试试每个例子，再看它适合处理什么工作。
Easing
↗ 缓动曲线
缓动曲线决定动画从开始到结束的速度变化，比如先慢后快，或先快后慢。
cubic-bezier()面板会快速入场，再柔和停下；离场时间更短，动作也更直接。
- 什么时候用
- 希望速度能表现重量、方向或操作意图时，可以调整缓动曲线。
- 什么时候不要用
- 不要让每个交互都套上同一条夸张的弹跳曲线。
- 代码里的名称
cubic-bezier()
Spring Animation
↗ 弹簧动画
弹簧动画采用物理模型，由刚度、阻尼、质量和初始速度控制动作。
stiffness / damping / mass拖动的卡片回到位置时会稍微越过目标，再自然停稳。
- 什么时候用
- 动效由手势驱动、可以中断，而且需要保留操作速度时，可以使用弹簧动画。
- 什么时候不要用
- 常用控件或敏感流程不要加入过度弹跳。
- 代码里的名称
stiffness / damping / mass
快速比较
| 界面模式 | 最适合 | 不适合 | 代码里的名称 |
|---|---|---|---|
| 缓动曲线Easing | 希望速度能表现重量、方向或操作意图时，可以调整缓动曲线。 | 不要让每个交互都套上同一条夸张的弹跳曲线。 | cubic-bezier() |
| 弹簧动画Spring Animation | 动效由手势驱动、可以中断，而且需要保留操作速度时，可以使用弹簧动画。 | 常用控件或敏感流程不要加入过度弹跳。 | stiffness / damping / mass |
上线前检查
- 01
先写下用户要完成什么事。
- 02
测试键盘、焦点、触控、缩放、加载、空白与错误状态。
- 03
不用鼠标悬停或动画，也要能取得相同信息。
- 04
放入真实内容，并在小屏幕和大屏幕上测试。
04
可以直接复制的比较需求
团队还不知道该选哪一种界面模式时，可以复制这段需求。
请在 缓动曲线（Easing）、弹簧动画（Spring Animation） 中，为真实用户流程选出最合适的界面模式。判断规则：缓动曲线会按设定好的节奏移动。弹簧动画像真的弹簧，会自己慢慢停下来。。请写下任务、内容量和打断流程的代价，并检查键盘、触控、加载、错误与减少动态效果。说明选择理由，再沿用项目的设计系统，做出最小且无障碍的版本。