动效 – 时长 & 缓动

时长 & 缓动

材料的动画灵敏且自然。使用这些缓动曲线和持续时间模式来创建平滑连贯的动效。

缓动曲线

标准曲线
减速曲线
加速曲线
夏普曲线

速度 Expand and collapse content An arrow that points down when collapsed and points up when expanded.

当元素在移动或者形变时，速度应足够快，快到可以避免用户等待，但同时也要足够慢，慢到过渡动画可以被理解。保持过渡简短，因为用户会频繁的看到这些过渡动画。

正确示例

动画要足够快，这样用户无需等待动画结束。

错误示例

不要使动画过慢，因为这样会导致不必要的延迟。

动态时长 Expand and collapse content An arrow that points down when collapsed and points up when expanded.

与其对所有的动效都使用相同的持续时间，不如根据移动距离，物体的速度以及形变来调整每个动效的时长。

元素离开屏幕时可以使用较短的动效时长，因为这不需要引起用户的注意。

物体需要移动较长距离、或者面积的变化较大时，需要使用较长的动画时长。

物体需要移动的距离较短、或者面积的变化较小时，需要使用较短的动效时长，这样动画看起来不会显得很缓慢。

常用时长 Expand and collapse content An arrow that points down when collapsed and points up when expanded.

移动端

移动端的过渡时长通常在 300ms 内，根据情况可做如下调整：

  • 幅度大、复杂的、全屏过渡动画可能需要更长的持续时间，可以长达 375ms
  • 元素进入屏幕需要的时长为 225ms
  • 元素离开屏幕需要的时长为 195ms

超过 400ms 的过渡动画可能会感觉太慢。

大屏设备

在大屏设备上，相同时间内，元素长距离移动时，速度的峰值会比短距离移动时更大。更大的屏幕需要更长的过渡时长，以确保元素不会移动过快。

平板

平板上的过渡时长会比手机上的长 30%。例如，在手机上需要 300ms 的过渡，在平板上需要增加到 390ms。

可穿戴设备

可穿戴设备上的过渡时长会比手机上的短 30%。例如，在手机上需要 300ms 的过渡，在可穿戴设备上需要减少到 210ms。

因为在大屏设备上，元素需要移动更长的距离，所以过渡动画会比小屏设备稍慢一点。

桌面端

桌面端的动画应该比手机端更快、更简单。动画的持续时间应保持在 150ms 到 200ms 之间。

桌面端的过渡动画可能不太明显，所以应该比手机端的动画更敏捷快速。

Web 端复杂的动画通常会掉帧（除非使用了 GPU 加速）。更短的过渡时间可以让动画不那么引人注目。

桌面端的过渡动画会更快。

自然缓动曲线 Expand and collapse content An arrow that points down when collapsed and points up when expanded.

自然缓动曲线会影响元素的速度、不透明度和缩放。

动画中加速度和减速度的改变应该平滑，这样才不会显得呆板。

当加速度和减速度不对称时，动画会显得更自然和愉悦。

缓动曲线

根据所使用的平台或软件不同，缓动曲线会有不同的命名。这份指南把它们称为标准曲线、减速曲线、加速曲线和夏普曲线。

标准曲线

标准曲线（也称为 “ease in out” ）是最常见的缓动曲线。元素会在屏幕上的位置之间快速加速，缓慢减速。它主要用于材料变大变小，以及其他属性改变的动画。

更多信息详见屏幕内的移动。

平台

约定

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%
Incoming Velocity: 80%

减速曲线

使用减速曲线（也称为 “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%
Incoming Velocity: 80%

加速曲线

使用加速曲线（也称为 “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%
Incoming Velocity: 0%

夏普曲线

使用夏普曲线（也称为 “ease in out” ）时，元素会很快的加速和减速。主要用在已有的元素离开屏幕后重新返回时。

元素可以在屏幕的起始点快速加速，然后以对称曲线快速减速到离开屏幕的点。它的减速度比标准曲线快，因为在离开屏幕时并不存在明确的路径。元素可能在任何时候返回。

更多细节详见退出屏幕时的移动。

平台

约定

Android

-

iOS

-

CSS

cubic-bezier(0.4, 0.0, 0.6, 1);

After Effects

Outgoing Velocity: 40%
Incoming Velocity: 40%