合理的设置速度能够使动画更加平稳。

Speed adjustments make transitions smooth and responsive.

速度控制

当 UI 发生变化时，转场需要使用用户能够察觉的速度。速度主要通过调整转场动画的持续时间来控制，也可以通过加速度以及元素移动的距离来控制。

在调整持续时间之前应该使用合适的加速度。

Speed adjustments include duration (how long a transition lasts) and easing (acceleration over time).

Controlling transitions by adjusting speed helps users understand UI changes, without complicating tasks.

控制速度

Speed adjustments include duration (how long a transition lasts) and easing (acceleration over time). Controlling transitions by adjusting speed helps users understand UI changes, without complicating tasks.

适当的转换速度可帮助用户跟踪UI更改，而不会使任务复杂化。应该使用可能的最短持续时间，而不是突然或刺耳。
合适的速度可以帮助用户在没有复杂的任务指示下跟踪 UI 中各个元素的变化。在追求快速响应用户操作时，也必须有一定的持续时间，而不是突然地对 UI 进行切换。 Do
Make transitions quick and easy to follow. The FAB transitions quickly into a creation page to unobtrusively establish a parent-child relationship

Don’t
Avoid transitions that are too fast for users to follow UI changes or transitions that are overly slow and prevent a user from advancing.

Duration

Regardless of an animation’s style, transitions shouldn’t be jarringly fast or so slow that users feel as though they’re waiting. The right combination of duration and easing produces smooth and clear transitions.

Exits and closing

Transitions that close, dismiss, or collapse an element use shorter durations.

Exit transitions may be faster because they require less attention than the user’s next task. A navigation drawer opens over 250ms but closes over 200ms.

The card expands over 300ms but collapses over 250ms

Transition area

Transitions that cover small areas of the screen have shorter durations than those that traverse larger areas.

Small

Elements with small transition areas, such as icons and selection controls, have short durations. A switch animation has a duration of 100ms.

Medium

Elements with larger transition areas, such as bottom sheets and expanding chips, have slightly longer durations. Animated bottom sheet:

• Expanding: 250ms
• Collapsing: 200ms

Animated chip:

• Expanding: 250ms
• Collapsing: 200ms

Large

Animated elements that traverse a large portion of the screen have the longest durations.

A FAB into a full-screen dialog:

• Expanding: 300ms
• Collapsing: 250ms

A persistent sheet:

• Expanding: 300ms
• Collapsing: 250ms

缓冲

设置加速度是一种调整动画速度的方法。

缓冲（阻力）概念的引入后，允许动画中的元素加速和减速，而不是以恒定速率进行位移。在现实世界中，物体运动时的速率不会在一瞬间降为 0。速率的变化需要时间来加速和减速。

Easing adjusts an animation’s rate of change, allowing transitioning elements to speed up and slow down, rather than move at a constant rate.

In the physical world, objects don’t start or stop instantaneously. Instead, they take time to speed up and slow down. Easing is a technique that makes elements move as though natural forces like friction, gravity, and mass are at work. > 没有缓冲的动画十分僵硬。

Transitions without easing look stiff and mechanical, while a transition with easing is more reminiscent of movement in nature.

缓冲类型

不同的平台以不同方式命名缓冲类型。这些指南将它们称为标准、加速和减速。

Easing types may be named differently across platforms. Material Design refers to: standard, emphasized, accelerated, and decelerated easing.

标准缓冲

在动画中，让加速度逐渐升高或降低能够让动画的推进更加自然。在开始时不急于加速，让加速度逐渐变大；在结束时不急于减速，而是让加速度逐渐变小。

Standard easing subtly brings attention to the end of an animation by taking more time to decelerate than accelerate. Standard easing is the most common form of easing.

Elements that begin and end at rest use standard easing. They speed up quickly and slow down gradually, in order to emphasize the end of the transition. > 示例中元素移动的加速度并不是恒定的，而是采用标准缓冲类型来推进动画。（y轴：位移；x轴：时间）

An element with standard easing slows down as it approaches the end of its trajectory. In this graph the y-axis indicates the element’s on-screen position while the x-axis shows time elapsed.

强调缓冲

In comparison to standard easing, emphasized easing draws extra attention at the end of an animation. Emphasized easing is usually paired with longer durations to convey a more stylized sense of speed.
Elements that begin and end at rest use emphasized easing. They speed up quickly and slow down very gradually, placing extra emphasis on the end of the transition.

An element with emphasized easing slows very gradually as it approaches the end of its trajectory. In this graph the y-axis indicates the element’s on-screen position while the x-axis shows time elapsed.

减速缓冲

元素以峰值速度（元素位移的最快速度）为起点开始减速，加速度也随之减小并在元素停止移动时归零。

Incoming elements are animated using decelerated easing, in which transitions begin at peak velocity (the fastest point in an element’s movement) and end at rest. > 示例中元素采用减速缓冲类型来推进动画。（y轴：位移；x轴：时间）

An animated element with decelerated easing enters quickly and ends at rest. In this graph the y-axis indicates the element’s on-screen position while the x-axis shows time elapsed.

加速缓冲

退出屏幕的元素一般会使用加速缓冲类型，它们从静止开始并以峰值速度结束。

Elements exiting a screen use accelerated easing, a transition in which the element starts at rest and ends at peak velocity. > 示例中元素采用加速缓冲类型来推进动画。（y轴：位移；x轴：时间）

An animated element with decelerated easing enters quickly and ends at rest. In this graph the y-axis indicates the element’s on-screen position while the x-axis shows time elapsed.

下表涵盖了市面上主流平台的减速缓冲的设置：