Material motion - 真實的動作

Motion in the world of material design is used to describe spatial relationships, functionality, and intention with beauty and fluidity.

【翻譯】
運動用于描述空間關系，功能和意圖與美麗和流動性篙耗。

Why does motion matter - 為什么運作很重要?

Motion shows how an app is organized and what it can do.

Motion provides:

Guided focus between views
Hints at what will happen if a user completes a gesture
Hierarchical and spatial relationships between elements
Distraction from what’s happening behind the scenes (like fetching content or loading the next view)
Character, polish, and delight

【翻譯】
運動顯示了應用程序的組織方式以及它可以做什么恃鞋。
動作提供：
引導視圖之間的焦點
提示如果用戶完成手勢會發(fā)生什么
元素之間的層次和空間關系
分請后臺發(fā)生的事情（如抓取內容或加載下一個視圖）
個性，修飾和喜悅

How does material move - 材料如何移動?

The material environment draws inspiration from real-world forces, such as gravity and friction. These forces are reflected in the way user input affects elements on screen and how elements react to each other.

Material in motion has the following characteristics:

【翻譯】
material 環(huán)境從現(xiàn)實世界的力量中吸取靈感痛单，如重力和摩擦力。 這些力反映在用戶輸入影響屏幕上的元素的方式上劲腿，以及元素如何相互作用旭绒。
運動中的材料具有以下特性：

Responsive - 響應
Material is full of energy. It quickly responds to user input precisely where the user triggers it.

【翻譯】
材料充滿了能量。 它快速響應用戶輸入焦人，以及準確地觸發(fā)挥吵。

【翻譯】
移動設備上的較大動畫長度為300-400毫秒。較小的動畫可以短到150-200ms花椭。比這些動畫更長或更短的動畫可能會感覺遲緩或難以跟隨忽匈。 查看更多常見持續(xù)時間。

【翻譯】
水波紋通過立即從觸摸點向外擴展來確認用戶輸入矿辽〉ぴ剩卡升起以指示活動狀態(tài)。 查看更多在徑向反應袋倔。

【翻譯】
顯示頁面與創(chuàng)建它們的元素或操作之間的連接雕蔽。 查看更多創(chuàng)作。

Natural - 自然
Material depicts natural movement inspired by forces in the real world.

【翻譯】
材料描繪了由現(xiàn)實世界中的力量啟發(fā)的自然運動宾娜。

【翻譯】
在現(xiàn)實世界中批狐，物體加速或快速減速的能力受重量和表面摩擦的影響。以類似的方式前塔，在材料設計中不立即發(fā)生啟動和停止嚣艇。 在Natural easing曲線中查看更多缘眶。

【翻譯】
現(xiàn)實世界的力量，如重力髓废，元素沿著弧而不是直線的運動巷懈。 在運動中查看更多。

【翻譯】
材料變換遵循運動軌跡慌洪。 查看更多在Transforming material顶燕。

Aware - 直覺性
Material is aware of its surroundings, including the user and other material around it. It can be attracted to objects and respond appropriately to user intent.
See more in Choreography.

【翻譯】
材料知道其周圍環(huán)境，包括用戶和周圍的其他材料冈爹。它可以吸引對象涌攻，并適當?shù)仨憫脩粢鈭D。 查看更多編排频伤。

As elements transition into view, they and their surroundings are choreographed in a way that defines their relationships.

【翻譯】
隨著元素轉變?yōu)橐曇翱一眩麄兒退麄兊闹車砸环N定義他們的關系的方式編排。

Material can push other material out of the way

【翻譯】
材料可以推開其他材料

Elements may attract other elements and join with them as they approach one another.

【翻譯】
元素可以吸引其他元素并且當它們彼此接近時與它們連接憋肖。

Intentional - 有意的
Material in motion guides focus to the right spot at the right time.
See more in Continuity.

【翻譯】
運動中的材料在正確的時間引導聚焦到正確的地點因痛。 在Continuity中查看更多。

A transition helps guide the user to the next step of an interaction.

【翻譯】
轉換有助于指導用戶進行交互的下一步岸更。

Animation can bring focus to objects that need user attention.

【翻譯】
動畫可以將焦點帶到需要用戶注意的對象鸵膏。

Movement can communicate different signals, such as whether an action is unavailable.

【翻譯】
移動可以傳達不同的信號，例如動作是否不可用怎炊。

What makes a good transition - 什么是好的過渡?

Successful motion design possesses the following characteristics:

【翻譯】
成功的運動設計具有以下特點：

Motion is quick - 快速
An interaction shouldn't keep the user waiting longer than necessary.

【翻譯】
交互不應該使用戶等待的時間超過必要谭企。

正確的示范

Do.
Animate quickly so that the user never has to wait for the animation to finish.

【翻譯】
正確的示范
動畫快速，以便用戶從不必等待動畫完成评肆。

錯誤的示范

Don't.
Staggering and slowing the movement of many elements can lengthen the duration.

【翻譯】
錯誤的示范
交錯減緩了所有空間的運動速度

Motion is clear - 清晰
Transitions should be clear, simple, and coherent. They should avoid doing too much at once.

【翻譯】
過渡應該是清晰债查，簡單和連貫的。 他們應該避免一次做太多瓜挽。

正確的示范

Do.
Maintain a clear path into the next view, even while elements are choreographed as a group.

【翻譯】
正確的示范
在下一個視圖中保持清晰的路徑盹廷，即使元素被編排為一個組撵割。

錯誤的示范

Don't.
Transitions can get confusing when multiple items need to move in different directions or cross paths.

【翻譯】
錯誤的示范
當多個項目需要在不同的方向或交叉路徑移動時，轉換可能會混亂恶阴。

Motion is cohesive - 凝聚力
Material elements are unified by their speed, responsiveness, and intention. Any customizations to your app's motion experience should be consistent throughout the app.

【翻譯】
材料元素通過其速度反症，響應性和意圖而統(tǒng)一。對應用程式運動體驗的任何自訂內容在整個應用程式中應該保持一致帆谍。

Implications of motion - 運動帶來的影響

The benefits of these motion patterns are observable in the following two examples, in which an app that follows these patterns is compared with an app that does not.

【翻譯】
這些運動模式的好處在以下兩個例子中是可觀察的，其中跟隨這些模式的應用程序與沒有的應用程序進行比較。

正確的示范

Do.
During the transition, the user is guided to the next view. The surface transforms to communicate hierarchy. Loading occurs behind the scenes to reduce perceived latency.

【翻譯】
正確的示范
在轉換期間吭敢，用戶被引導到下一視圖。表面變換到通信層次暮芭。加載發(fā)生在幕后鹿驼，以減少感知的延遲欲低。

錯誤的示范

Don't.
It is unclear how the new view is related to the old because no transition occurs and there isn’t a clear focal point. Any sense of hierarchy isn’t communicated, and loading is more apparent by the display of a circular spinner.

【翻譯】
錯誤的示范
不清楚新視圖如何與舊有關，因為沒有過渡發(fā)生畜晰，沒有明確的焦點砾莱。不傳達任何層次感，并且通過顯示圓形旋轉器更加明顯地加載凄鼻。

Duration and easing - 持續(xù)和緩動

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

【翻譯】
運動中的材料是響應和自然的腊瑟。使用這些緩動曲線和持續(xù)時間模式創(chuàng)建平滑和一致的運動。

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.

【翻譯】
當元素在位置或狀態(tài)之間移動時块蚌，移動應該足夠快以使其不引起等待闰非，但是足夠慢以使得能夠理解轉移。保持轉換時間很短峭范，因為用戶會頻繁看到它們财松。

正確的示范

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

【翻譯】
正確的示范
快速動畫，使用戶不必等待動畫完成纱控。

錯誤的示范

Dynamic durations - 動態(tài)持續(xù)時間

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 may have shorter durations, as they require less attention.

【翻譯】
不是為所有動畫使用單個持續(xù)時間辆毡，請調整每個持續(xù)時間以適應行進的距離，元素的速度和表面變化甜害。 離開屏幕的對象可以具有較短的持續(xù)時間胚迫，因為它們需要較少的注意。

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

【翻譯】

當物體需要行走較長距離或表面積有巨大變化時唾那，使用較長的持續(xù)時間访锻。

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

【翻譯】
當物體行進短距離或表面積有微小變化時，使用較短的持續(xù)時間闹获，以使移動不會顯得太慢期犬。

Common durations - 普通的持續(xù)時間

Mobile - 手機

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

1.Large, complex, full-screen transitions may have longer durations, occurring over 375ms
2.Objects entering the screen occur over 225ms
3.Objects leaving the screen occur over 195ms
Transitions that exceed 400ms may feel too slow.

【翻譯】
移動上的轉換通常在300ms內發(fā)生，在這個方差范圍內：
1.大的避诽，復雜的全屏轉換可以具有更長的持續(xù)時間龟虎，發(fā)生超過375ms
2.進入屏幕的對象超過225ms
3.離開屏幕的對象發(fā)生超過195毫秒
超過400ms的轉換可能感覺太慢。

Larger screens - 大尺寸屏幕

Objects 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.

【翻譯】
在較大屏幕上行進較長距離的物體具有比在相同時間段內較短距離的峰值速度更高的峰值速度沙庐。較大的屏幕應該有更長的持續(xù)時間鲤妥，以便移動不會太快。

Tablets - 平板電腦

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

【翻譯】
平板電腦的比手機長約30％拱雏。例如棉安，平板電腦上300毫秒的移動時長會增加到390毫秒。

Wearables - 可穿戴設備

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

【翻譯】
可穿戴設備的使用比移動設備的使用時間短約30％铸抑。例如贡耽，300ms的移動持續(xù)時間將是210ms的可穿戴設備。

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

【翻譯】
因為材料必須在更大的設備上移動更大的距離，所以轉換可以具有比在更小的設備上稍慢的持續(xù)時間

Desktop - 桌面設計

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.

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.

【翻譯】
桌面動畫應該比他們的移動對象更快更簡單蒲赂。 這些動畫應該持續(xù)150ms到200ms阱冶。
因為桌面轉換可能不太明顯，所以它們應該立即響應并且比移動對等方更快滥嘴。
復雜的網(wǎng)絡轉換通常會導致幀丟失（除非它們是為GPU加速而構建的）木蹬。 較短的持續(xù)時間將使這些不那么明顯，因為動畫完成得更快若皱。

Transitions appear much faster on desktop.

【翻譯】
轉換在桌面上顯示得更快届囚。

Natural easing curves - 自然緩和曲線

These natural easing curves affect an object’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.

【翻譯】
這些自然緩動曲線影響對象的速度，不透明度和縮放是尖。
加速度和減速度變化應該在動畫的整個持續(xù)時間內平滑意系，以使運動不會出現(xiàn)機械。

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

【翻譯】
當加速和減速不對稱地發(fā)生時饺汹，運動表現(xiàn)得更自然和愉快蛔添。

Easing 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.

【翻譯】
緩沖曲線可以根據(jù)所使用的平臺或軟件而不同地命名。這些指南將它們稱為標準兜辞，減速迎瞧，加速度和尖銳曲線。

Standard curve - 標準曲線
This is the most common easing curve. Objects 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.

【翻譯】
這是最常見的緩和曲線逸吵。對象在屏幕上的位置之間快速加速和慢速減速凶硅。它適用于增長和收縮材料，以及其他屬性變化扫皱。 在屏幕邊界內的運動中查看更多足绅。

參數(shù)

Deceleration curve (“Easing out”) - 減速曲線
Objects enter the screen at full velocity from off-screen and slowly decelerate to a resting point.
During deceleration, objects may scale up either in size (to 100%) or opacity (to 100%). In some cases, when objects 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.

【翻譯】
物體從離屏處以全速度進入屏幕，并緩慢減速到靜止點韩脑。
在減速期間氢妈，對象可以在大小（到100％）或不透明度（到100％）上放大段多。 在某些情況下首量，當對象以0％不透明度進入屏幕時，它們可能在進入時從較大尺寸略微收縮加缘。
查看更多在移動和移出屏幕邊界柄延。

參數(shù)

Acceleration curve (“Easing in”) - 加速曲線
Objects leave the screen at full velocity. They do not decelerate when off-screen.
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 objects 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.

【翻譯】
物體以全速離開屏幕蜒程。 它們在離屏時不減速绅你。
它們在動畫開始時加速，并且可以按尺寸（到0％）或不透明度（到0％）縮小昭躺。 在某些情況下忌锯，當對象以0％不透明度離開屏幕時，它們也可能稍微放大或縮小领炫。
查看更多在移動和移出屏幕邊界偶垮。

參數(shù)

Sharp curve - 夏普曲線
The sharp curve is used by objects that may return to the screen at any time.
Objects 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. Objects may return from that point at any time.
See more in Movement in and out of screen bounds.

【翻譯】
尖銳的曲線由可以隨時返回到屏幕的對象使用。
對象可以從屏幕上的起始點快速加速帝洪，然后以對稱曲線快速減速到離開屏幕的靜止點似舵。 減速度比標準曲線快，因為它不遵循離屏點的精確路徑葱峡。 對象可以隨時從該點返回砚哗。
查看更多在移動和移出屏幕邊界。

參數(shù)

Movement - 移動

Material in motion abides by forces similar to those of the real world, like gravity.

【翻譯】
運動中的物質受到與真實世界相似的力砰奕，如重力蛛芥。

On-screen movement - 屏幕上移動
Arc upward
Arc downward

【翻譯】
向上弧
向下弧

In-and-out screen movement
Independent movement
Relative movement

【翻譯】
獨立運動
相對運動

Movement within screen bounds - 在屏幕邊界內移動

The movement of an element between two points within the bounds of the screen follows a natural, concave arc. All on-screen movements use the standard curve.

【翻譯】
元素在屏幕邊界內的兩個點之間的運動遵循自然的凹弧。所有屏幕上的移動使用標準曲線军援。

Arc upward - 向上弧
Rising against gravity in the real world requires effort. Elements moving upward on the screen should similarly depict effort during acceleration through a slower upward movement.

【翻譯】

在現(xiàn)實世界中反抗重力需要動力常空。在屏幕上向上移動的元素應該類似地描繪通過較慢向上移動的加速期間的努力

正確的示范

Do.
When moving diagonally upward, begin with a shallow ascent and end with a steep ascent.

【翻譯】
正確的示范
當向斜上方移動時，從漸漸上升開始盖溺，以陡峭的上升結束漓糙。

錯誤的示范

【翻譯】
錯誤的示范
向上移動時顛倒物理忽略重力拉力，并且看起來不自然烘嘱。

Arc downward - 向下弧

Falling objects in the real world are accelerated by gravity. Elements moving downward on screen should depict less effort through a faster downward movement.

【翻譯】
現(xiàn)實世界中的物體被重力加速昆禽。在屏幕上向下移動的元素應該通過更快的向下移動來描繪更少的動力。

正確的示范

Do.
When moving diagonally downward, descent should begin steeply and end shallowly.

【翻譯】
正確的示范
當向斜下方移動時蝇庭，下降應該陡峭地開始并且漸漸結束醉鳖。

錯誤的示范

Don't.
Reversing physics while moving downward ignores the gravitational pull.

【翻譯】
錯誤的示范
向下移動時顛倒物理忽略重力拉力。

When not to arc - 什么時候不用弧線

Objects moving along a single axis (either horizontally or vertically, but not both) do not follow an arc. These movements are simpler and may move at a slightly faster speed.

【翻譯】
沿單個軸（水平或垂直哮内，但不是兩者）移動的對象不遵循弧線盗棵。這些運動更簡單壮韭，并且可以以稍快的速度移動。

正確的示范

Do.
Keep the path for single-axis movement straight.

【翻譯】
正確的示范
保持單軸運動的路徑直線纹因。

錯誤的示范

Don't.
Don’t apply an unnatural arc to single-axis movement.

【翻譯】
錯誤的示范
不要對單軸運動應用非自然弧喷屋。

Objects entering and exiting the screen also move along a single axis.

【翻譯】
進入和離開屏幕的對象也沿著單個軸移動。

正確的示范

Do.
Linear entrances are easy to follow with a clearly defined entry point.

【翻譯】
正確的示范
線性入口很容易跟隨一個明確定義的入口點瞭恰。

錯誤的示范

Don't.
Don’t arc the path of an object if it is moving off-screen, as it complicates the entry point.

【翻譯】
錯誤的示范
如果對象在屏幕外移動屯曹，則不要弧化對象的路徑，因為它使入口點復雜化惊畏。

Movement in and out of screen bounds - 移入和移出屏幕邊界

Independent movement - 獨立運動
Objects entering and exiting the screen are referred to as independent objects as they don't affect the position of other on-screen content.

【翻譯】
進入和退出屏幕的對象被稱為獨立對象恶耽，因為它們不影響其他屏幕上內容的位置。

Entering the screen - 進入屏幕
Objects entering the screen use the deceleration curve for a speedy entrance, indicating that they had been travelling at peak velocity.

【翻譯】
進入屏幕的對象使用減速曲線獲得快速入口颜启，表明他們已經(jīng)以最高速度行進偷俭。

Permanently leaving the screen - 永久離開屏幕
Objects permanently leaving the screen use the acceleration curve to speed off-screen over a slightly shorter duration, as they will not be returning and require less user focus.

【翻譯】
永久離開屏幕的對象使用加速曲線在稍短的持續(xù)時間內加速離屏，因為它們不會返回缰盏，并且需要較少的用戶聚焦社搅。

正確的示范

Do.
Apply the deceleration curve to items entering the screen that do not affect the position of any other objects around it. On mobile, this transition typically occurs over 225ms. Apply the acceleration curve to these same items when they permanently leave the screen. On mobile, this transition typically occurs over 195ms.

【翻譯】
正確的示范
對進入屏幕的項目應用減速曲線，不影響其周圍任何其他對象的位置乳规。 在移動上形葬，這種轉換通常發(fā)生在225ms以上。 當他們永久離開屏幕時暮的，將加速度曲線應用于這些相同的項目笙以。 在移動設備上活烙，此轉換通常發(fā)生在195毫秒以上溉知。

錯誤的示范

Don't.
Don’t use the standard curve for either these cases. For entrances, slow acceleration is unnecessary as focus should be on the final resting point. For exits, slow deceleration is unnecessary as the ending point isn’t visible.

【翻譯】
錯誤的示范
不要在這些情況下使用標準曲線。對于入口硼瓣，緩慢加速是不必要的恨闪，因為焦點應該在最終靜止點倘感。對于出口，不需要緩慢減速咙咽，因為終點不可見老玛。

Temporarily leaving the screen - 臨時離開屏幕
Objects temporarily leaving the screen should use the sharp curve, as they may return to the screen at any time and should appear nearby and within reach.

【翻譯】
臨時離開屏幕的對象應該使用尖銳的曲線，因為它們可以隨時返回到屏幕钧敞，并且應該出現(xiàn)在附近和觸及范圍內蜡豹。

正確的示范

Do.
Apply the sharp curve to items temporarily leaving the screen that may return from the same exit point. When they return, use the deceleration curve. On mobile, this transition typically occurs over 300ms.

【翻譯】
正確的示范
將臨時離開屏幕的項目應用于可能從同一出口點返回的項目。當它們返回時溉苛，使用減速曲線镜廉。在移動設備上，此轉換通常發(fā)生在300ms以上愚战。

錯誤的示范

Don't.
Apply the acceleration curve to items permanently leaving the screen, or if they are to return from a different location. If they return, use the deceleration curve.

【翻譯】
錯誤的示范
將加速度曲線應用于永久離開屏幕的項目娇唯，或者如果要從不同的位置返回齐遵。如果它們返回，請使用減速曲線塔插。

Relative movement - 相對運動
Entering or exiting objects that move other on-screen elements do so along a smooth easing curve, so that they remain minimally disruptive and avoid eye-catching, dramatic movement.
The standard curve is used for moving objects both in and out of the bounds of the screen. This curve has a slightly longer duration compared to independent objects.

【翻譯】
進入或退出移動其他屏幕元素的對象沿著平滑的緩和曲線這樣做梗摇，使得它們保持最小的破壞性并避免引人注目的戲劇性移動。
標準曲線用于將對象移入和移出屏幕的邊界佑淀。與獨立對象相比留美，此曲線的持續(xù)時間稍長彰檬。

正確的示范

Since the on-screen floating action button’s movement is influenced by the entering card, the standard curve is applied to the movement of both objects to maintain a smooth start and stop. On mobile, this transition typically occurs over 300ms.

【翻譯】
正確的示范
由于屏幕上浮動按鈕的移動受到進入卡的影響伸刃，所以標準曲線被應用于兩個對象的移動以保持平滑的開始和停止。在移動設備上逢倍，此轉換通常發(fā)生在300ms以上捧颅。

錯誤的示范

Don't.
Using deceleration and acceleration curves for the upward and downward movement cause the on-screen floating action button to abruptly start moving upward and abruptly stop moving downward. This movement is harsh and disruptive.

【翻譯】
錯誤的示范
使用上下運動的減速和加速曲線使屏幕上的浮動動作按鈕突然開始向上移動并突然停止向下移動。這個運動是苛刻和破壞性的较雕。

Transforming material - 變形

Material can make surfaces feel alive by multiplying and dividing them, and changing their shape and size.

【翻譯】
材料可以通過鑲嵌和分割它們碉哑，并改變它們的形狀和尺寸使表面感覺生動。

Rectangular transformation - 矩形變換
Asymmetric - 不對稱
Symmetric - 對稱
Radial transformation - 徑向變換
Symmetrical and circular - 對稱和圓形

Rectangular transformation - 矩形變換

When material changes shape and size, its width and height change asynchronously along a motion curve. These changes arechoreographed with nearby surfaces inside or around the changing element.
All surface transformations that occur on-screen, such as the ones below, use the standard curve.

【翻譯】
當材料改變形狀和尺寸時亮蒋，其寬度和高度沿著運動曲線異步變化扣典。 這些變化與改變元件內部或周圍的附近表面進行編排。 在屏幕上發(fā)生的所有表面變換慎玖，如下面的贮尖，使用標準曲線。

Transforming width and height - 變換寬度和高度
Elements may be expanded or collapsed using either asymmetric or symmetrical width and height changes.

【翻譯】
可以使用不對稱或對稱的寬度和高度變化來擴展或折疊元素趁怔。

Asymmetric transformations involve the width and height changes at different rates. They work best when multiple elements or position changes are involved.

【翻譯】
當涉及多個元素或位置變化時湿硝，不對稱變換涉及不同速率的寬度和高度變化，才是最好的選擇润努。

Asymmetric transformation

To expand an object's size, begin transforming the width of an object slightly before transforming the height. To collapse an object's size, begin transforming the height slightly before the width.

【翻譯】
不對稱變換
要擴展對象的大小关斜，請在轉換高度之前稍微轉換對象的寬度。 要折疊對象的大小铺浇，請開始在寬度之前稍微轉換高度痢畜。

Symmetrical transformations involve width and height changes occurring at the same rate. They are better for changes to a single element that occur along a single axis.

【翻譯】
對稱變換涉及以相同速率發(fā)生的寬度和高度變化。它們更適合于沿單個軸發(fā)生的單個元素的更改鳍侣。

Symmetric transformation

Transforming width and height at the same time is a less detailed animation approach best suited to simple shape changes. These transformations can have slightly shorter durations than asymmetric ones.

【翻譯】
對稱變換
同時變換寬度和高度是一種不太復雜的動畫方法裁着，最適合簡單的形狀更改。這些變換可以具有比非對稱變換稍短的持續(xù)時間拱她。

When an object expands asynchronously, the items it contains (such as text or images) change size at a constant aspect ratio to prevent unnatural stretching. For more information on how to transition content within a surface, see Choreography.

【翻譯】
當對象異步擴展時二驰，其包含的項目（例如文本或圖像）以恒定的寬高比更改大小，以防止非自然拉伸秉沼。有關如何轉換曲面內的內容的更多信息桶雀，請參閱編排矿酵。

Content (such as a full-width image) transforms at a constant aspect ratio, even as its container (such as a larger card) transforms asynchronously along a motion curve.

【翻譯】
內容（例如全寬圖像）以恒定的寬高比進行變換，即使其容器（例如較大的卡）沿著運動曲線異步變換矗积。

Containers with full-bleed content (such as a full-bleed image) may expand synchronously.

【翻譯】
具有full-bleed內容的容器（例如full-bleed圖像）可以同步擴展全肮。

Radial transformation - 徑向變換

Radial transformations are symmetrical, circular visualizations that originate from a user’s point of touch. They are commonly used on circular surfaces that morph into other shapes.

【翻譯】
徑向變換是源自用戶的觸摸點的對稱的圓形可視化。它們通常用在圓形表面上棘捣，變形為其他形狀辜腺。

正確的示范

Do.
Radial transformation should be used on circular surfaces that morph into rectangular surfaces, or for creating new surfaces from the point of input.

【翻譯】
正確的示范
徑向變換應該用于圓形表面，變形為矩形表面乍恐，或者從輸入點創(chuàng)建新表面评疗。

錯誤的示范

Don't.
Don’t use a radial transformation when transforming between two rectangular shapes.

【翻譯】
錯誤的示范
在兩個矩形之間轉換時，不要使用徑向變換茵烈。

錯誤的示范

Don't.
Don’t expand an oval’s width and height asynchronously.

【翻譯】
錯誤的示范
不要異步擴展橢圓的寬度和高度百匆。

錯誤的示范

Don't.
Don’t transform complex shapes.

【翻譯】
錯誤的示范
不要轉換復雜的形狀。

Transformations can originate either from the object’s current location or from the center of the final surface being formed.

【翻譯】
轉換可以源自對象的當前位置或者從正在形成的最終表面的中心呜投。

During expansion, the floating action button moves in an arc towards its destination as it expands into a card.

【翻譯】
在擴展期間加匈，浮動動作按鈕在其擴展到卡中時朝著其目的地以弧形移動。

The center of the floating action button stays in place during the transformation, creating a subtler expansion effect.

【翻譯】
在轉換過程中仑荐，浮動操作按鈕的中心停留在位置雕拼，創(chuàng)建細微的擴展效果。

Joining & Dividing - 結合&分離

Joining - 結合

Material may join with other material, or it may divide into multiple pieces. As two pieces of material approach one other, their edges meet and margins overlap before the movement completes.

【翻譯】
材料可以與其它材料接合粘招，或者它可以分成多個部分啥寇。當兩片材料彼此接近時，它們的邊緣相遇并且邊緣在移動完成之前重疊男图。

Dividing - 分離

When material divides into multiple pieces, the pieces begin separation at the start of the movement.

【翻譯】
當材料分成多個部分時示姿，這些部分在運動開始時開始分離。

Shadows - 陰影

Shadows from separated material do not appear above sibling elements.

【翻譯】
來自分離材料的陰影不會出現(xiàn)在兄弟元素上方逊笆。

Example of material joining and dividing

【翻譯】
示例

Choreography - 編排

Material in motion guides the user’s focus through interactions by sharing elements across transitions.

【翻譯】
運動中的材料通過在過渡中共享元素的交互來引導用戶的注意力栈戳。

Surface creation - 表面創(chuàng)建
Stagger the choreography of new surfaces being created.

【翻譯】
交錯創(chuàng)建的新曲面的編排。

Radial reaction - 徑向反應
Connect user input to surface reactions with touch ripples.

【翻譯】
將用戶輸入與觸摸波紋連接到表面反應难裆。

Continuity - 連續(xù)性

Maintain a clear focal point during transitions by carefully selecting the number and type of elements shared across the transitions.

【翻譯】
通過仔細選擇跨過轉換共享的元素的數(shù)量和類型子檀，在轉換期間保持清晰的焦點。

All content elements are shared

While a surface is expanding, a significant number of elements should remain visible during the transition.

Complex transitions should keep a single element visible (see below).

【翻譯】
所有內容元素都是共享的
當表面膨脹時乃戈，大量的元素在過渡期間應保持可見褂痰。
復雜轉換應該保持單個元素可見（見下文）。

All elements from this collapsed card form the header of the expanded card.

【翻譯】
來自此展開的卡片的所有元素形成擴展的卡片的標題症虑。

Few or no content elements are shared
While expanding a surface, if only a single element will be present after the transition, that element should be the focal point of the transition, controlling all other elements.

【翻譯】
很少或沒有共享內容元素
當擴展表面時缩歪，如果在轉換之后僅存在單個元件，則該元件應該是轉換的焦點谍憔，控制所有其他元件匪蝙。

Anchoring non-shared content to a single shared element’s movement.

【翻譯】
將非共享內容錨定到單個共享元素的移動主籍。

If there are no shared elements between views, anchor all crossfading elements to the surface’s vertical movement. The surface crops the content within.

【翻譯】
如果視圖之間沒有共享元素，則將所有交叉漸變元素錨定到表面的垂直移動逛球。表面修剪內容千元。

Anchoring all non-shared content to the vertical movement of the surface expansion.

【翻譯】
將所有非共享內容錨定到表面擴展的垂直運動。

No shared surfaces (Not recommended)
If there are no common surfaces shared across the transition, a new surface enters the screen from another location, creating a new focal point.

【翻譯】
無共享曲面（不推薦）
如果沒有公共曲面在過渡中共享颤绕，新曲面將從另一個位置進入屏幕幸海，創(chuàng)建一個新的焦點。

Multiple shared elements
When multiple elements remain visible during a transition, only the most important ones should be included. Some elements may disappear during the transition but reappear once the transition completes, if they are too distracting during the transition itself.

【翻譯】
多個共享元素
當在轉換期間多個元素保持可見時奥务，應僅包括最重要的元素物独。 一些元素可能在過渡期間消失，但一旦過渡完成汗洒，則重新出現(xiàn)议纯，如果它們在過渡期間過于分散注意力父款。

正確的示范

Do.
Guide the user’s focus to the next view using the most important shared element.

【翻譯】
正確的示范
使用最重要的共享元素將用戶的焦點引導到下一個視圖溢谤。

失敗的示范

Don't.
Avoid creating scenes without focus, such as by using many shared elements or by letting objects cross paths during the transition.

【翻譯】
錯誤的示范
避免創(chuàng)建沒有焦點的場景，例如通過使用許多共享元素或在轉換期間讓對象交叉路徑憨攒。

Layout awareness

When any element doesn't completely load by the time a transition completes, allow sufficient space in the location where the element will appear. This prevents jarring layout shifts when the elements finally appear, and avoids user frustration when a touch target suddenly jumps away.

【翻譯】
布局意識
當任何元素在轉換完成時未完全加載時世杀，請在元素出現(xiàn)的位置留出足夠的空間。 這防止了當元素最終出現(xiàn)時的擾亂的布局偏移肝集，并且避免當觸摸目標突然跳開瞻坝。

正確的示范

Do.
Make room for the unloaded elements during the transition and gracefully display them in place once they fully load.

【翻譯】
正確的示范
在過渡期間為加載的元素騰出空間，并在完全加載后正常顯示它們杏瞻。

錯誤的示范

Don't.
Don’t shift the layout as elements load into view, as this distracts and causes a shift in focus.

【翻譯】
錯誤的示范
不要將布局作為元素加載到視圖中所刀，因為這會分散注意力并導致焦點移動。

Creation - 創(chuàng)建

New material surfaces, and their content, may be created from nothing.

【翻譯】
新的材料表面及其內容可以從沒有創(chuàng)建捞挥。

Creating new surfaces

Associate newly created surfaces to the element or action that creates them. New surfaces usually emerge from radial or rectangular expansions from the point of touch.

【翻譯】
創(chuàng)建新曲面
將新創(chuàng)建的曲面與創(chuàng)建它們的元素或操作關聯(lián)浮创。新表面通常從觸摸點的徑向或矩形膨脹出現(xiàn)。

正確的示范

Do.
This menu appears from the touch point, tying the element to the point of touch.

【翻譯】
正確的示范
此菜單從接觸點出現(xiàn)砌函，將元素綁定到觸摸點斩披。

錯誤的示范

Don't.
This menu appears far away from the touch point that triggered it, which breaks its relationship with the input method.

【翻譯】
錯誤的示范
此菜單顯示為遠離觸發(fā)它的觸摸點，從而破壞其與輸入的關系讹俊。

Choreographing surfaces

When multiple new surfaces are created at the same time, quickly stagger the appearance of each. Create a clear, smooth focal path in a single direction.

【翻譯】
編排曲面
當同時創(chuàng)建多個新曲面時垦沉，快速交錯每個曲面的外觀。在單個方向創(chuàng)建清晰仍劈，平滑的焦點路徑厕倍。

正確的示范

Do.
List items have a slightly staggered entrance. Grid items populate left to right, and top to bottom.

【翻譯】
正確的示范
列表項有一個稍微交錯的入口。網(wǎng)格項從左到右贩疙，從上到下填充讹弯。

錯誤的示范

Don't.
Items shouldn’t appear within the list all at once. It’s overwhelming and eliminates a clear focus.

【翻譯】
錯誤的示范
項目不應同時出現(xiàn)在列表中诬像。它是壓倒性的，消除了清晰的焦點闸婴。

錯誤的示范

Don't.
Items that have a slightly staggered entrance shouldn’t appear in an order that’s confusing to follow.

【翻譯】
錯誤的示范
具有稍微交錯的入口的項目不應該以令人困惑的順序出現(xiàn)坏挠。

錯誤的示范

Don't.
Do not wait for each item to fully animate before introducing the next item. Begin each item’s staggered entrance no more than 20ms apart.

【翻譯】
錯誤的示范
在介紹下一個項目之前，不要等待每個項目完全動畫邪乍。開始每個項目的交錯入口不超過20毫米降狠。

Autonomous surface creation

Surfaces created without user input, or without a point of origin, should do so using an elegant combination of fading, position, and scaling transformations.

【翻譯】
自動觸發(fā)創(chuàng)建
在沒有用戶輸入或沒有原點的情況下創(chuàng)建的曲面應該使用漸變，位置和縮放轉換的優(yōu)雅組合庇楞。

正確的示范

Do.
An automatically triggered surface appears smoothly and quickly.

【翻譯】
正確的示范
自動觸發(fā)的表面平滑且快速地出現(xiàn)榜配。

錯誤的示范

Don't.
Too much animation during surface creation is distracting.

【翻譯】
錯誤的示范
表面創(chuàng)建期間太多的動畫會分散注意力。

Radial reaction - 徑向反應

Clarify the connection between user input and surface reactions using radial action.

【翻譯】
使用徑向動作來說明用戶輸入和表面反應之間的連接吕晌。

User input

Connect user input to screen reactions by using touch ripples to both indicate the point of touch, and to confirm that touch input was received. For touch or mouse, this occurs at the point of contact.

Screen reactions occurring near the point of touch should occur sooner than reactions further away.

【翻譯】
用戶輸入
通過使用觸摸波紋將用戶輸入連接到屏幕反應蛋褥，以指示觸摸點，并確認接收到觸摸輸入睛驳。
對于觸摸或鼠標烙心，這發(fā)生在接觸點。
在觸摸點附近發(fā)生的屏幕反應應該比更遠離的反應更早發(fā)生乏沸。

Use touch ripples to connect screen reactions to the point of touch.

【翻譯】
使用觸摸波紋將屏幕反應連接到觸摸點淫茵。

Starting from the point of touch, the app bar changes color with the new color rippling outwards.

【翻譯】
從觸摸點開始，應用欄會隨著新顏色向外波動而更改顏色蹬跃。

Images in this grid fade out based on the radial reaction around the tap point.

【翻譯】
基于在敲擊點周圍的徑向反應匙瘪，該網(wǎng)格中的圖像淡出。

Creative customization - 創(chuàng)意定制

Animation may be used in a wide range of scales and contexts to unite beauty and function.

【翻譯】
動畫可以在廣泛的尺度和上下文中使用以統(tǒng)一顏值和功能。

**Icon types - 圖標類型 **
System icons may perform dual functions.
Product icons should demonstrate polish.

【翻譯】
系統(tǒng)圖標可以執(zhí)行雙重功能。
產(chǎn)品圖標應顯示拋光贱鄙。

Icons - 圖標

System icons - 系統(tǒng)圖標

An icon may serve dual functions. For example, a menu icon may smoothly transition to a playback control, and back again. This effect both informs the user of the button's function while adding an element of wonder to the interaction.

【翻譯】
圖標可以提供雙重功能。例如碍论，菜單圖標可以平滑地轉變到回放控制，并再次回到以前狀態(tài)荐吵。該效果既向用戶通知按鈕的功能骑冗，同時向交互添加奇跡的元素。

Transforming the menu icon into the back arrow signifies that the two actions are connected, and that one cannot exist while the other is present. The back button must be pressed in order to return to the top-level view with the menu icon.

【翻譯】
將菜單圖標轉換為后退箭頭表示兩個操作已連接先煎，并且一個不能存在贼涩，而另一個已存在。必須按下后退按鈕才能返回到具有菜單圖標的頂級視圖薯蝎。

Transforming the play button to a pause button signifies that the two actions are linked, and that pressing one makes the other one visible.

【翻譯】
將播放按鈕轉換為暫停按鈕表示兩個動作鏈接遥倦，并且按下一個使另一個可見。

When pressing this floating action button, the plus sign transforms into a pencil. This indicates that the pencil is the primary creation method.

【翻譯】
當按下此浮動操作按鈕時，加號轉換為鉛筆袒哥。這表明鉛筆是主要的創(chuàng)作方法缩筛。

**Product icons - 產(chǎn)品圖標 **

Animated product icons should demonstrate polish and refinement from the moment the app launches.

【翻譯】
動畫產(chǎn)品圖標應顯示從應用啟動時開始的波形和細化。

The Inbox product icon animation displays when the user opens the app for the first time and is asked to sign in.

【翻譯】
當用戶首次打開應用時堡称，系統(tǒng)會顯示收件箱產(chǎn)品圖標動畫瞎抛，并要求您登錄。

The Calendar product icon animation displays when the user’s calendar data is loaded for the first time.

【翻譯】
首次加載用戶的日歷數(shù)據(jù)時却紧，會顯示日歷產(chǎn)品圖標動畫桐臊。

The Photos product icon animation displays when the user opens the app for the first time and enters the warm welcome.

【翻譯】
當用戶第一次打開應用程序并輸入熱烈歡迎時，會顯示照片產(chǎn)品圖標動畫晓殊。

The Gmail product icon animation has a slightly more playful personality while still keeping a similar reveal, and is also displayed when the user opens the app for the first time and is asked to sign in.

【翻譯】
Gmail產(chǎn)品圖示動畫有一個稍微更有趣的個性断凶，同時仍然保持類似的顯示，當用戶第一次打開應用程序并要求登錄時巫俺，也會顯示认烁。

Illustrations - 插圖

Subtle animation in imagery and illustrations can add a sense of playfulness to the user experience.

【翻譯】
在圖像和插圖中的微妙動畫可以為用戶體驗添加俏皮感。

When displaying an unexpected error, use it as an opportunity to delight with animation.

【翻譯】
當顯示意外錯誤時介汹，使用它作為用動畫欣賞的機會却嗡。