材料的动画灵敏且自然。使用这些缓动曲线和持续时间模式来创建平滑连贯的动效。
缓动曲线
标准曲线
减速曲线
加速曲线
夏普曲线
速度
当元素在移动或者形变时，速度应足够快，快到可以避免用户等待，但同时也要足够慢，慢到过渡动画可以被理解。保持过渡简短，因为用户会频繁的看到这些过渡动画。
正确示例
动画要足够快，这样用户无需等待动画结束。
错误示例
不要使动画过慢，因为这样会导致不必要的延迟。
动效– 时长 & 缓动
时长 & 缓动
动态时长
与其对所有的动效都使用相同的持续时间，不如根据移动距离，物体的速度以及形变来调整每个动效的时长。
元素离开屏幕时可以使用较短的动效时长，因为这不需要引起用户的注意。
物体需要移动较长距离、或者面积的变化较大时，需要使用较长的动画时长。
物体需要移动的距离较短、或者面积的变化较小时，需要使用较短的动效时长，这样动画看起来不会显得很缓慢。
常用时长
移动端
移动端的过渡时长通常在 300ms 内，根据情况可做如下调整：
- 幅度大、复杂的、全屏过渡动画可能需要更长的持续时间，可以长达 375ms
- 元素进入屏幕需要的时长为 225ms
- 元素离开屏幕需要的时长为 195ms
超过 400ms 的过渡动画可能会感觉太慢。
大屏设备
在大屏设备上，相同时间内，元素长距离移动时，速度的峰值会比短距离移动时更大。更大的屏幕需要更长的过渡时长，以确保元素不会移动过快。
平板
平板上的过渡时长会比手机上的长 30%。例如，在手机上需要 300ms 的过渡，在平板上需要增加到 390ms。
可穿戴设备
可穿戴设备上的过渡时长会比手机上的短 30%。例如，在手机上需要 300ms 的过渡，在可穿戴设备上需要减少到 210ms。
因为在大屏设备上，元素需要移动更长的距离，所以过渡动画会比小屏设备稍慢一点。
桌面端
桌面端的动画应该比手机端更快、更简单。动画的持续时间应保持在 150ms 到 200ms 之间。
桌面端的过渡动画可能不太明显，所以应该比手机端的动画更敏捷快速。
Web 端复杂的动画通常会掉帧（除非使用了 GPU 加速）。更短的过渡时间可以让动画不那么引人注目。
桌面端的过渡动画会更快。
自然缓动曲线
自然缓动曲线会影响元素的速度、不透明度和缩放。
动画中加速度和减速度的改变应该平滑，这样才不会显得呆板。
当加速度和减速度不对称时，动画会显得更自然和愉悦。
缓动曲线
根据所使用的平台或软件不同，缓动曲线会有不同的命名。这份指南把它们称为标准曲线、减速曲线、加速曲线和夏普曲线。
平台 | 约定 |
Android | FastOutSlowInInterpolator |
iOS | [[CAMediaTimingFunction alloc] initWithControlPoints:0.4f:0.0f:0.2f:1.0f] |
CSS | cubic-bezier(0.4, 0.0, 0.2, 1); |
After Effects | Outgoing Velocity: 40% |
减速曲线
使用减速曲线（也称为 “ease out”）时，元素会全速进入屏幕，然后缓慢减速到目标位置。
减速期间，元素可能会放大尺寸（到 100%）或不透明度（到 100%）。在一些情况下，当元素以 0% 的不透明度进入屏幕时，可能会从比原始尺寸更大的尺寸略微收缩一点。
更多信息详见进出屏幕时的移动。
平台 | 约定 |
Android | LinearOutSlowInInterpolator |
iOS | [[CAMediaTimingFunction alloc] initWithControlPoints:0.0f:0.0f:0.2f:1.0f] |
CSS | cubic-bezier(0.0, 0.0, 0.2, 1); |
After Effects | Outgoing Velocity: 0% |
加速曲线
使用加速曲线（也称为 “ease in”）时，元素会全速离开屏幕。离开屏幕时不会减速。
在动画开始时会加速，并可能缩小尺寸（到 0%）或不透明度（到 0%）。在一些情况下，当元素以 0% 的不透明度离开屏幕时，同时可能会放大或缩小尺寸。
更多细节详见进出屏幕时的移动。
平台 | 约定 |
Android | FastOutLinearInInterpolator |
iOS | [CAMediaTimingFunction alloc] initWithControlPoints:0.4f:0.0f:1.0f:1.0f] |
CSS | cubic-bezier(0.4, 0.0, 1, 1); |
After Effects | Outgoing Velocity: 40% |
夏普曲线
使用夏普曲线（也称为 “ease in out”）时，元素会很快的加速和减速。主要用在已有的元素离开屏幕后重新返回时。
元素可以在屏幕的起始点快速加速，然后以对称曲线快速减速到离开屏幕的点。它的减速度比标准曲线快，因为在离开屏幕时并不存在明确的路径。元素可能在任何时候返回。
更多细节详见退出屏幕时的移动。
平台 | 约定 |
Android | - |
iOS | - |
CSS | cubic-bezier(0.4, 0.0, 0.6, 1); |
After Effects | Outgoing Velocity: 40% |