Material 动效灵敏且自然。使用这些缓动曲线和时长模式来创建平滑且一致的动效。
缓动曲线
标准曲线
减速曲线
加速曲线
急促曲线
速度
当元素在移动或形变时，速度应足够快以避免用户等待，但也要足够慢以便理解过渡过程。保持过渡简短，因为用户会频繁看到这些动画。
推荐做法
动画要足够快，这样用户无需等待动画结束。
不推荐做法
不要让动画过慢，因为这样会导致不必要的延迟。
动效– 时长与缓动
时长与缓动
动态时长
与其对所有动效都使用相同的时长，不如根据移动距离、元素速度以及表面变化来调整每个动画的时长。
元素离开屏幕时可以使用较短的动画时长，因为它们不需要吸引用户太多注意力。
物体需要移动较长距离、或者面积变化较大时，需要使用较长的动画时长。
物体需要移动的距离较短、或者面积变化较小时，需要使用较短的动画时长，这样动画看起来不会显得很缓慢。
常用时长
移动端
移动端的过渡时长通常在 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% |