运动中的 Material（材料）是响应式和自然的。使用一些缓动曲线和持续时间模式来创造一些顺滑和连贯的运动。

Material in motion is responsive and natural. Use these easing curves and duration patterns to create smooth and consistent motion.

缓速曲线

Easing curves

• 标准曲线
• 减速曲线
• 加速曲线
• 急弯曲线

• Standard curve
• Deceleration curve
• Acceleration curve
• Sharp curve

速度

Speed

当元素从起始位置移动到目标位置时的状态，为了不让用户等待过长的时间，运动的速度应该足够快。但同时也要保证速度不能过快而导致用户无法了解你的目的。当用户能频繁看到时，则应该将变化时间变的缩短。

When elements move between positions or states, the movement should be fast enough that it doesn't cause waiting, but slow enough that the transition can be understood. Keep transitions short as users will see them frequently.

正确，动画的速度应该足够快，这样用户不会等待过久。

Do.Animate quickly so that the user doesn’t have to wait for the animation to finish.

错误，动画如果过慢会显得非常浪费

Don't.Don’t animate slowly as it creates unnecessary lag.

动态持续时间

Dynamic durations

不是所有的动画都使用同一个持续时间， 根据元素的行进时间，分别调整该元素速度和表面变化的持续时间，使之变得和谐统一。

Rather than using a single duration for all animations, adjust each duration to accommodate the distance travelled, an element's velocity, and surface changes.

Objects leaving the screen 应该是较短的持续时间，以减少注意力。

Objects leaving the screen may have shorter durations, as they require less attention.

当物体需要进行较长距离运动或表面巨大变化时，应该使用较长的持续时间。

Use longer durations when objects need to travel large distances or have dramatic changes in surface area.

当物体进行较短距离运动或较小表面变化时，使用较短的持续时间，这样动画不会显得很慢。

Use shorter durations when objects travel short distances or have minor changes in surface area, so that the movement doesn't appear too slow.

常用持续时间

Common durations

移动端

Mobile

在移动端上面的转换，通常在 300ms 左右的时间内完成：

• 大型，复杂，全屏的变换使用较长的持续时间，建议时间为 375ms
• 元素进入屏幕，建议时间为 225ms
• 元素离开屏幕，建议时间为 195ms

当变换超过 400ms 时，用户就会感觉到缓慢。

Transitions on mobile typically occur over 300ms, within this margin of variance:

• Large, complex, full-screen transitions may have longer durations, occurring over 375ms
• Elements entering the screen occur over 225ms
• Elements leaving the screen occur over 195ms

Transitions that exceed 400ms may feel too slow.

大屏设备

Larger screens

在较大屏幕上行进较长距离的元素具有比在相同时间段内较短距具有更高的离峰值速度。较大的屏幕应具有较长的持续时间，以便移动不会太快。

Elements travelling longer distances on larger screens have higher peak velocities than those going shorter distances over the same time period. Larger screens should have longer durations so that movements aren't too fast.

平板设备

Tablets

平板设备持续时间一般比移动设备长 30% 。例如，一个长度为 300ms 的移动端动画在平板端应该延长为 390ms。

Durations on tablet should be about 30% longer than on mobile. For example, a 300ms mobile duration would increase to 390ms on tablet.

可穿戴式设备

Wearables

可穿戴式设备的持续时间应该比移动端的持续时间要短30%，例如，在移动端 300ms 的持续时间在可穿戴式设备上应该是 210ms。

Durations on wearables should be about 30% shorter than those on mobile. For example, a 300ms mobile duration would be 210ms on wearables.

因为材料在大屏的设备上需要移动更长的距离，所以持续时间也应该比小屏幕的设备更长才对

Because material must move greater distances on larger devices, transitions may have slightly slower durations than on smaller devices.

桌面端

Desktop

桌面端的动画应该比移动端的设备更快速，桌面端的动画结束时间通常为 150ms 到 200ms。

Desktop animations should be faster and simpler than their mobile counterparts. These animations should last 150ms to 200ms.

在桌面端是因为它的变化不是很显眼，所以它们的反馈应该比移动端更加的迅速才对。

Because desktop transitions may be less noticeable, they should be immediately responsive and faster than their mobile counterparts.

复杂的网络传输经常造成的结果就是，有时候会丢帧（除非它们是为 GPU 加速而构建的）。所以较短的动画可以使这种情况造成的后果不那么明显。

Complex web transitions often result in dropped frames (unless they are built for GPU acceleration). Shorter durations will make these less noticeable because the animation completes faster.

元素出现的变动，在桌面端要快于移动端。

Transitions appear much faster on desktop.

自然缓速曲线

Natural easing curves

这些自然暖和曲线作用于元素的速度，不透明度和大小的变化。

These natural easing curves affect an element’s speed, opacity, and scale.

加速和减速运动变化在整个时间内都应该是顺滑的过度，这样就不会使你的动画过于死板。

Acceleration and deceleration changes should be smooth across the duration of an animation so that movement doesn't appear mechanical.

当加速和减速运动的曲线不是对称时，表现出来的运动会更佳的自然和真实。

Motion appears more natural and delightful when acceleration and deceleration occur asymmetrically.

缓速曲线

Easing curves

缓速曲线可能在不同的平台和软件中使用不同的命名。以下指导内容将他们分为，standard（标准曲线），deceleration（减速曲线），acceleration（加速曲线），sharp curves（急弯曲线）。

Easing curves may be named differently depending on the platform or software used. These guidelines will refer to them as standard, deceleration, acceleration, and sharp curves.

标准曲线

Standard curve

The standard curve（标准曲线也称为“ease in out”），是最常见的曲线。元素使用快速的加速和慢速的减速在屏幕上运动。它适用于材料的 growing（生长）和 shrinking（收缩），以及部分属性的变化。

The standard curve (also referred to as “ease in out”) is the most common easing curve. Elements quickly accelerate and slowly decelerate between on-screen locations. It applies to growing and shrinking material, among other property changes.

See more in Movement within screen bounds

减速曲线

Deceleration curve

使用 deceleration curve（减速曲线：通常也称为“ease out”）运动的元素以全速进入屏幕，并缓慢减速至静止点。

Using the deceleration curve (also referred to as “ease out”) elements enter the screen at full velocity and slowly decelerate to a resting point.

在减速的过程中，元素可以按照大小（变到 100%）或者按照不透明度（到100%）显示出来。在某些情况下，当元素以 0% 的不透明度进入屏幕时，他们可以以较大的尺寸进入在进行收缩到正常尺寸。

During deceleration, elements may scale up either in size (to 100%) or opacity (to 100%). In some cases, when elements enter the screen at 0% opacity, they may slightly shrink from a larger size upon entry.

See more in Movement in and out of screen bounds.

加速曲线

Acceleration curve

Acceleration curve （加速曲线也被称为“ease in”）通常是指元素以最高的速度离开屏幕。它在离开屏幕前，并不会进行减速。

Using the acceleration curve (also referred to as “ease in”) elements leave the screen at full velocity. They do not decelerate when off-screen.

元素在加速开始的时候通常会缩小他们的尺寸（直到减到 0%）或者减少不透明度（直到到0%）。在某些情况下，当元素离开屏幕是他们的不透明度为 0% ，他们也可以在尺寸上进行放大或缩小。

They accelerate at the beginning of the animation and may scale down in either size (to 0%) or opacity (to 0%). In some cases, when elements leave the screen at 0% opacity, they may also slightly scale up or down in size.

See more in Movement in and out of screen bounds.

急弯曲线

Sharp curve

Sharp curve（使用急弯曲线通常也被称为“ease in out”) 的元素是快速的加速和减速。通常被用于退出但可随时返回屏幕的元素使用。

Using the sharp curve (also referred to as “ease in out”) elements quickly accelerate and decelerate. It is used by exiting elements that may return to the screen at any time.

元素可在屏幕上起始点进行快速的加速，然后以对称曲线进行快速的减速到离开屏幕的静止点。减速度比标准曲线的速度要快，因此它不遵保持精准的线路通过离屏点。元素可以随时从该点返回。

Elements may quickly accelerate from a starting point on-screen, then quickly decelerate in a symmetrical curve to a resting point immediately off-screen. The deceleration is faster than the standard curve since it doesn't follow an exact path to the off-screen point. Elements may return from that point at any time.

See more in Movement in and out of screen bounds.