在Material Design中，運動被用來描述空間的關系，功能，流動美的意圖。

運動的作用

1. 引導布局中的焦點軌跡
2. 引導用戶的手勢操作
3. 展示元素之間的層次結構和空間關系
4. 分散在幕后的事情(比如抓取內(nèi)容或加載下一個視圖)
5. 提升用戶體驗
6. Related - Making Motion Meaningful

如何運動

物質(zhì)環(huán)境從現(xiàn)實世界的力量中汲取靈感，比如重力和摩擦力。這些力量反映在用戶輸入影響屏幕上的元素以及元素如何相互作用的方式上。

1. 響應

   
   
   快速響應用戶輸入，準確地響應用戶的觸發(fā)

2. 自然

   
   
   自然運動的靈感來自于現(xiàn)實世界中的力學

3. 意識

   
   
   材料可以感知周圍的環(huán)境，包括用戶和周圍的其他材料。它可以被元素吸引，并對用戶的意圖作出適當?shù)捻憫?/div>

4. 意向性

   
   
   在正確的時間，運動指南中的有意材料將焦點放在正確的地點。

如何做到更好的連貫
成功的運動設計具有以下特點:

1. 運動是快速
   交互不應該讓用戶等待的時間超過必要的時間。
2. 運動是清楚的
   過渡應該是清晰、簡單和連貫的。他們應該避免做太多的事情。
3. 運動要統(tǒng)一
   物質(zhì)元素的速度、響應能力和意圖是統(tǒng)一的。任何對應用程序的動作體驗的定制都應該在整個應用程序中保持一致。

合適的時長&自然的過度曲線

運動中的物質(zhì)是響應性和自然性的。使用這些放松曲線和持續(xù)時間模式來創(chuàng)建平滑和一致的運動。

• 速度
  當元素在位置或狀態(tài)之間移動時，移動速度應該足夠快，不會導致等待，但速度足夠慢，可以理解轉(zhuǎn)換。在用戶經(jīng)常看到的情況下，保持簡短的過渡。

• 動態(tài)的持續(xù)時間
  與其為所有的動畫使用一個單一的持續(xù)時間，不如調(diào)整每個持續(xù)時間來適應運動的距離，元素的速度和表面的變化。
  離開屏幕的對象可能會有更短的持續(xù)時間，因為它們需要較少的關注。

• 一般時長設定
  移動端上常見的持續(xù)時間移動轉(zhuǎn)換通常發(fā)生在300毫秒左右，在這種差異的范圍內(nèi):大的、復雜的、全屏幕的轉(zhuǎn)換可能有更長的持續(xù)時間，超過400ms的過渡可能感覺太慢。
  大屏幕上的大屏幕元素的距離較長，其峰值速度要高于在同一時間段內(nèi)較短的距離。更大的屏幕應該有更長的時間，這樣移動的速度就不會太快。
  平板電腦的持續(xù)時間應該比移動設備長約30%。例如，在平板電腦上，300毫秒的移動時間將增加到390ms。
  可穿戴設備上的持續(xù)時間應該比移動設備短約30%。例如，在可穿戴設備上，300毫秒的移動續(xù)航時間是210ms。由于材料必須在更大的設備上移動更大的距離，所以過渡的時間可能比小的設備要慢一些。
  桌面的動畫應該比他們的移動設備更快更簡單。這些動畫的效果應該是150毫秒到200毫秒。因為桌面轉(zhuǎn)換可能不那么引人注目，所以它們應該立即響應，并且比移動設備更快。
  復雜的web轉(zhuǎn)換通常會導致掉幀(除非它們是為GPU加速而構建的)。較短的持續(xù)時間將使這些不太明顯，因為動畫完成得更快。

• 自然緩和曲線

這些自然的放松曲線會影響一個元素的速度、不透明度和尺度。
在動畫的持續(xù)時間內(nèi)，加速和減速的變化應該是平滑的，這樣運動才不會顯得機械。
當加速度和減速不對稱地發(fā)生時，運動顯得更加自然和令人愉悅。

根據(jù)使用的平臺或軟件，可以根據(jù)不同的平臺來命名不同的曲線。
這些指導方針將把它們稱為標準、減速、加速和銳曲線。

標準曲線

標準曲線

減速曲線

減速曲線

加速度曲線

加速度曲線

使用加速曲線元素以完全速度離開屏幕。
在屏幕外，它們不會減速。
在動畫開始的時候，它們會加速，并且可以縮小到任意大小(到0%)或者不透明度(到0%)。
在某些情況下，當元素以0%的不透明度離開屏幕時，它們可能也會稍微放大或縮小。

鋒利的曲線

鋒利的曲線

使用鋒利的曲線，元素會迅速加速和減速。
它是由退出元素所使用的，這些元素可能在任何時候返回到屏幕上。
元素可以從屏幕上的起始點迅速加速，然后在對稱的曲線上迅速減速，然后在屏幕外的休息點迅速減速。
減速比標準曲線要快，因為它沒有沿著偏離屏幕的精確路徑。
元素可以在任何時候從那個點返回。

親愛的讀者 您好，寫到這里思路瞬間斷了 本文皆翻譯自官網(wǎng)，而官網(wǎng)所展示內(nèi)容我無法完美演示，所以在此附上官網(wǎng)鏈接https://material.io/ 想深 入了解學習 請移步官網(wǎng)。
我也是在學習過程之中，后續(xù)如果有收獲、有能力的情況下， 會考慮重寫此文章，深表歉意。

順便提一句我的個人主頁就是Material Design風格的，不信點點看DuYang_ZXM(https://duyangs.github.io/)

每星期至少一篇跟新本系列，感興趣可以關注。一起學習，一起進步。

聲明本文圖片多數(shù)取自官網(wǎng)https://material.io/，轉(zhuǎn)載請注明

上一篇：Material Design你真的了解嗎？