运动 转换时长 & 缓动

转换时长 & 缓动

Material 的动画反应灵敏并且自然。使用模式化的缓动曲线和过渡时长可以创建平滑、连贯的动画。

缓动曲线

标准曲线
减速曲线
加速曲线
Sharp curve

速度 展开或收起内容 当内容收起时,箭头向下,当内容展开时,箭头向上。

当元素在移动或者形变的时候,速度应当足够快,快到可以避免用户等待,但同时也要足够慢,慢到让过度动画可以被理解。

动画要足够快,这样在动画结束前用户就可以看到内容。

太慢的动画会制造不必要的等待间隔。

灵活的转换时长 展开或收起内容 当内容收起时,箭头向下,当内容展开时,箭头向上。

与其对所有的动画都使用同样的持续时间,不如根据移动距离、物体的速度以及形变来适配每个动画。

元素离开屏幕时不需要引起用户的注意,应当使用较短的过渡时长。

物体移动的距离较长,或者面积的变化较大时,就需要使用较长的过渡时长。

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

常用的转换时长 展开或收起内容 当内容收起时,箭头向下,当内容展开时,箭头向上。

手机

手机上的过渡时长通常为 300ms 上下,根据情况可做以下调整:

  • 幅度很大、复杂、影响整个屏幕的动画需要更长的持续时间,可以长达 375ms
  • 元素进入屏幕需要的时长为 225ms
  • 元素离开屏幕需要的时长为 195ms

超过 400ms 的过渡动画可能会让用户觉得太慢。

大屏手机

元素在进行长距离移动时,速度的峰值会比短距离移动更大。更大的屏幕需要更长的过渡时长,以确保元素不会移动的太快。

平板电脑

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

可穿戴设备

可穿戴设备上的过渡时长会比手机上的短 30%。比如手机上需要 300ms 的过渡时长,可穿戴设备上会变成 210ms。

屏幕越大,元素移动的距离就越长,因此大屏设备上的过渡动画看起来会稍微慢一点。

桌面设备

相对于手机来说,相同的动画在桌面设备上应当更快、更简单。动画的持续时间应当保持在 150ms 到 200ms 之间。

相对于手机来说,桌面设备的过渡不需要太过明显,所以动画要尽可能的敏捷和快速。

复杂的网页动画通常会掉帧(除非使用了显卡加速)。更短的持续时间可以让动画不那么引人注目。

桌面设备上的过渡动画要足够快。

自然缓动曲线 展开或收起内容 当内容收起时,箭头向下,当内容展开时,箭头向上。

自然缓动曲线可以影响物体的速度、透明度和比例。

物体在动画中加速或减速时应当显得很平滑,这样才不会显得很呆板。

使用不对称的加速和减速会让动画显得更自然、更愉悦。

缓动曲线

不同的平台对于缓动曲线的叫法不同。本文参考了标准曲线、减速曲线、加速曲线和 sharp curve。

标准曲线

标准曲线(也被称为「ease in out」)是最常用的缓动曲线。物体加速开始,减速停止。主要用在物体变大或变小的动画,与此同时还有其他的动画。

更多详情可参考屏幕内的移动.

Platform

Protocol

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% 的不透明度进入屏幕,这时物体的尺寸会稍微增加一些。

更多详情可参考进出屏幕的移动.

Platform

Protocol

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% 的不透明度退出屏幕,同时可能会增加或降低尺寸。

更多详情可参考进出屏幕的移动.

Platform

Protocol

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%

Sharp curve

使用 sharp curve(也被称为「ease in out」)时,元素会很快的加速和减速。主要用在已有的元素离开屏幕后重新返回时。

元素可以在屏幕某点很快的加速,在离开屏幕之后的某点在以对称的曲线立即减速。它的减速会比标准曲线的减速更快,因为在屏幕之外并不存在一个明确的路径。元素可以在任何时候返回最初的地方。

更多详情可参考进出屏幕的移动.

Platform

Protocol

Android

-

iOS

-

CSS

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

After Effects

Outgoing Velocity: 40%
Incoming Velocity: 40%