Motion in the world of material design is used to describe spatial relationships, functionality, and intention with beauty and fluidity.
用material design世界中的移動(dòng)來(lái)描述空間關(guān)系，功能和完美流暢的動(dòng)作。

Contents
Why does motion matter?
How does material move?
What makes a good transition?
Implications of motion

**Why does motion matter? **為什么motion很重要
Motion shows how an app is organized and what it can do.
Motion顯示了應(yīng)用程序的組織方式，以及它可以做什么

Motion provides:

• Guided focus between views
  引導(dǎo)view之間的焦點(diǎn)
• Hints at what will happen if a user completes a gesture
  提示如果用戶完成一個(gè)手勢(shì)會(huì)發(fā)生什么
• Hierarchical and spatial relationships between elements
  元素之間的等級(jí)和空間關(guān)系
• Distraction from what’s happening behind the scenes (like fetching content or loading the next view)
  分心于幕后發(fā)生的事情（比如獲取內(nèi)容或者加載下一個(gè)界面）
• Character, polish, and delight
  特征，優(yōu)雅和趣味

Related 相關(guān)內(nèi)容
Making Motion Meaningful

How does material move?
material是如何移動(dòng)的？
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環(huán)境從現(xiàn)實(shí)世界的力量中吸取靈感，比如重力和摩擦。這些力量反映在用戶輸入影響屏幕上的元素以及元素如何相互響應(yīng)的方式。

Material in motion has the following characteristics:
material的移動(dòng)遵循以下特點(diǎn)
****Responsive****
Material is full of energy. It quickly responds to user input precisely where the user triggers it.
material是充滿活力的，它能很快地在用戶觸發(fā)的地方響應(yīng)用戶的輸入。

Larger animations on mobile devices are 300-400ms long. Smaller animations can be as short as 150-200ms. Animations longer or shorter than these can feel sluggish or difficult to follow.
移動(dòng)設(shè)備上的較大的動(dòng)畫持續(xù)300-400ms.較小的動(dòng)畫就像150-200ms一樣短。比這些更長(zhǎng)或更短的動(dòng)畫可能會(huì)讓人感到遲鈍或難以感觸到。
See more in Common Durations.

Ink ripples confirm user input by immediately expanding outward from the point of touch. The card lifts to indicate an active state.
油墨波紋通過立即從觸摸點(diǎn)向外擴(kuò)展的動(dòng)畫來(lái)確認(rèn)用戶輸入。
See more in Radial reaction.

Show the connection between new surfaces and the element or action that creates them.
顯示新界面與創(chuàng)建它們的元素或動(dòng)作之間的關(guān)系。
See more in Creation.

****Natural**** 自然
Material depicts natural movement inspired by forces in the real world.
material描繪了由現(xiàn)實(shí)世界中的力量啟發(fā)的自然運(yùn)動(dòng)
In the real world, an element’s ability to speed up or slow down quickly is affected by weight and surface friction. In a similar way, starts and stops do not occur instantaneously in material design.
在顯示世界中，元素的快速加速或減速的能力受重量和表面摩擦力的影響。在相似的方法中，開始和結(jié)束
不會(huì)再material中瞬間發(fā)生。
See more in Natural easing curves.

Real-world forces, like gravity, inspire an element’s movement along an arc rather than in a straight line.
現(xiàn)實(shí)世界的力量，如重力，激發(fā)元素沿弧線而不是直線的運(yùn)動(dòng)
See more in Movement.

Material transformations follow an arc of movement.
material變換遵循運(yùn)動(dòng)弧。它可以吸引到元素，并適當(dāng)?shù)仨憫?yīng)用戶的意圖
See more in Transforming material.

Aware
Material is aware of its surroundings, including the user and other material around it. It can be attracted to elements and respond appropriately to user intent.
material知道他的周圍環(huán)境，包括用戶和周圍其他的material。
See more in Choreography.

As elements transition into view, they and their surroundings are choreographed in a way that defines their relationships.
一旦元素轉(zhuǎn)換為view，他們和他們的周圍環(huán)境是以一種定義他們的關(guān)系的方式進(jìn)行編排的。

Material can push other material out of the way.
material能夠把其他的material推出去。

Elements may attract other elements and join with them as they approach one another.
元素可以吸引其他元素，并且一個(gè)挨著一個(gè)地連在一起。

****Intentional****
Material in motion guides focus to the right spot at the right time.
運(yùn)動(dòng)指南中的material在正確的時(shí)間將焦點(diǎn)集中到正確的位置。
See more in Continuity.

A transition helps guide the user to the next step of an interaction.
過渡動(dòng)畫有助于指導(dǎo)用戶進(jìn)行交互的下一步

Movement can communicate different signals, such as whether an action is unavailable.
運(yùn)動(dòng)可以傳達(dá)不同的信號(hào)，例如一個(gè)動(dòng)作是否不可用

Animation can bring focus to elements that need user attention.
動(dòng)畫可以將重點(diǎn)放在需要用戶關(guān)注的元素上

What makes a good transition?什么是一個(gè)很好的過渡
Successful motion design possesses the following characteristics:
成功的運(yùn)動(dòng)設(shè)計(jì)具有以下特點(diǎn)：
****Motion is quick****
An interaction shouldn't keep the user waiting longer than necessary.
互動(dòng)不應(yīng)該讓用戶等待更長(zhǎng)的時(shí)間。

Do. 官網(wǎng)視頻
Animate quickly so that the user never has to wait for the animation to finish.
快速的動(dòng)畫可以讓用戶不必再去等待動(dòng)畫完成。

Don't. 官網(wǎng)視頻
Staggering and slowing the movement of many elements can lengthen the duration.
不穩(wěn)當(dāng)?shù)幕瑒?dòng)和減速的運(yùn)動(dòng)可以延長(zhǎng)持續(xù)時(shí)間。

****Motion is clear****
Transitions should be clear, simple, and coherent. They should avoid doing too much at once.
移動(dòng)應(yīng)該是清晰，簡(jiǎn)單和連貫的。他們應(yīng)該避免一次做太多事情。

Do. 官網(wǎng)視頻
Maintain a clear path into the next view, even while elements are choreographed as a group.
即使元素被編排為一組，也要保持明確的路徑進(jìn)入下一個(gè)view。

Don't.
Transitions can get confusing when multiple items need to move in different directions or cross paths.
當(dāng)多個(gè)元素需要移動(dòng)到不同的方向或者通過不同的路徑，過渡動(dòng)畫可能被拒絕。

****Motion is cohesive****
Motion是有凝聚力的
Material elements are unified by their speed, responsiveness, and intention. Any customizations to your app's motion experience should be consistent throughout the app.
material元素由速度，響應(yīng)性和意圖統(tǒng)一起來(lái)。對(duì)應(yīng)用motion體驗(yàn)的任何自定義都應(yīng)在整個(gè)應(yīng)用程序中保持一致

While these apps have different functions, their similar animation experiences make them feel related.
雖然這些應(yīng)用程序具有不同的功能，但它們類似的動(dòng)畫體驗(yàn)使他們看起來(lái)相關(guān)聯(lián)。

Implications of motion
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.
在以下兩個(gè)示例中可以看到這些運(yùn)動(dòng)模式的好處，其中將遵循這些模式的應(yīng)用程序與不具有這些模式的應(yīng)用程序進(jìn)行比較。

Do. 官網(wǎng)視頻
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.
在過渡期間，用戶被引導(dǎo)到下一個(gè)view。平面轉(zhuǎn)換為通信層次結(jié)構(gòu)。后臺(tái)加載會(huì)降低感知延遲。

Don't. 官網(wǎng)視頻
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.
目前還不清楚新觀點(diǎn)如何與舊的相關(guān)，因?yàn)闆]有過渡發(fā)生，沒有明確的焦點(diǎn)。任何層次感都不會(huì)傳達(dá)出來(lái)，而通過顯示圓形微調(diào)器，加載更加明顯。