新版Material Design官方動(dòng)效指南已經(jīng)翻譯到第三章了！今天這部分，從動(dòng)效的運(yùn)動(dòng)和材料形變?nèi)胧郑屇愕膭?dòng)效自然真實(shí)，貼近現(xiàn)實(shí)狀態(tài)。再系統(tǒng)的干貨都比不上官方的動(dòng)效指南，西瓜就在這，趕緊來撿。

運(yùn)動(dòng)

Material design 的動(dòng)效會(huì)被類似真實(shí)世界中的力的影響，類似重力。

物體在屏幕內(nèi)的運(yùn)動(dòng)

屏幕內(nèi)物體在兩點(diǎn)之間的運(yùn)動(dòng)，是沿著一條自然、凹陷的弧線。屏幕上所有的運(yùn)動(dòng)都可以使用標(biāo)準(zhǔn)曲線。

弧線向上運(yùn)動(dòng)

在現(xiàn)實(shí)世界中，物體向上運(yùn)動(dòng)需要克服重力。元素在屏幕中向上運(yùn)動(dòng)，同樣也是需要克服一個(gè)加速度，較慢的向上運(yùn)動(dòng)。

正確：當(dāng)物體向上對(duì)角運(yùn)動(dòng)時(shí)，平緩開始上升，急劇停止在終點(diǎn)。

錯(cuò)誤：不要違反物理定律：當(dāng)物體向上運(yùn)動(dòng)時(shí)無視重力，這樣會(huì)顯得不自然。

弧線向下運(yùn)動(dòng)

在現(xiàn)實(shí)世界中，物體下降會(huì)受到重力的加速度。在屏幕中，物體向下移動(dòng)速度應(yīng)該會(huì)更快一點(diǎn)。

正確：當(dāng)物體向下對(duì)角運(yùn)動(dòng)時(shí)，下降開始急劇，然后平緩?fù)Ｖ埂?/p>

錯(cuò)誤：不要違反物理定律：向下運(yùn)動(dòng)的時(shí)候別忘記了向下的重力。

非弧線運(yùn)動(dòng)

當(dāng)物體沿著水平軸線或者垂直軸線運(yùn)動(dòng)時(shí)，請(qǐng)不要讓讓物體沿著弧線運(yùn)動(dòng)。這些運(yùn)動(dòng)時(shí)最簡單的，物體可以以一個(gè)比較快的速度運(yùn)動(dòng)。

正確：保持單軸的直線運(yùn)動(dòng)。

錯(cuò)誤：在水平或垂直方向上，不要讓物體沿著不自然的弧線運(yùn)動(dòng)。

物體進(jìn)入或退出屏幕時(shí)，也應(yīng)該沿著單軸運(yùn)動(dòng)。

正確：物體沿著直線路徑進(jìn)入屏幕，可以很明確的看見進(jìn)入點(diǎn)。

錯(cuò)誤：進(jìn)入和離開屏幕時(shí)不要沿著弧線，這樣會(huì)讓人搞不清楚進(jìn)入點(diǎn)到底在哪里。

物體進(jìn)入和退出屏幕的運(yùn)動(dòng)

獨(dú)立運(yùn)動(dòng)

物體做為一個(gè)獨(dú)立的元素，進(jìn)入退出屏幕不影響到屏幕上其他元素的位置。

進(jìn)入屏幕

物體是以減速曲線（具體參見持續(xù)時(shí)間與緩動(dòng)篇）進(jìn)入屏幕，以最大速度進(jìn)入，然后再慢慢減速。

永久離開屏幕

物體以加速曲線（具體參見持續(xù)時(shí)間與緩動(dòng)篇）永久離開屏幕，在很短時(shí)間內(nèi)快速離開屏幕，因?yàn)樗麄儾粫?huì)再重返屏幕，所以應(yīng)該減少用戶對(duì)它的關(guān)注。

正確：物體以減速曲線進(jìn)入屏幕應(yīng)該不要影響到屏幕上其他物體的位置。在移動(dòng)設(shè)備上，這種運(yùn)動(dòng)通暢持續(xù)225ms左右。同樣的物體使用加速曲線永久離開屏幕，在移動(dòng)設(shè)備上，大概持續(xù)195ms。

錯(cuò)誤：這兩種情況都不要使用標(biāo)準(zhǔn)曲線（具體參見持續(xù)時(shí)間與緩動(dòng)篇）。物體進(jìn)入屏幕時(shí)，緩慢加速的過程會(huì)吸引用戶不必要的注意力（用戶的注意力應(yīng)該放在最后停留的點(diǎn)上）。物體離開屏幕時(shí)，緩慢的減速同樣是不必要的，因?yàn)槲矬w運(yùn)動(dòng)的終點(diǎn)在屏幕外，是不可見的。

暫時(shí)離開屏幕

物體暫時(shí)離開屏幕應(yīng)該使用急轉(zhuǎn)曲線（具體參見持續(xù)時(shí)間與緩動(dòng)篇），出現(xiàn)點(diǎn)和消失點(diǎn)距離應(yīng)該很近，這樣他們可以隨時(shí)回到屏幕。

離開屏幕的物體從原路返回，離開時(shí)物體的運(yùn)動(dòng)應(yīng)該使用急轉(zhuǎn)曲線，返回時(shí)使用減速曲線。在移動(dòng)設(shè)備上，這個(gè)動(dòng)畫通常會(huì)持續(xù)300ms左右。

離開屏幕的物體從其他路徑返回或者永久離開屏幕時(shí)，離開時(shí)物體的運(yùn)動(dòng)應(yīng)該使用加速曲線，如有返回，則使用減速曲線。

關(guān)聯(lián)運(yùn)動(dòng)

和屏幕上其他元素有聯(lián)動(dòng)的進(jìn)入或退出動(dòng)畫，應(yīng)該使用平滑的緩動(dòng)曲線，這樣他們可以盡量減少干擾，避免太過搶眼，劇烈的運(yùn)動(dòng)。

標(biāo)準(zhǔn)曲線適用于關(guān)聯(lián)的多個(gè)物體進(jìn)入退出屏幕。多個(gè)物體運(yùn)動(dòng)的標(biāo)準(zhǔn)曲線會(huì)比獨(dú)立物體的時(shí)間稍稍長一些。

正確：浮動(dòng)按鈕的運(yùn)動(dòng)會(huì)受到從下方進(jìn)入的卡片的影響，浮動(dòng)按鈕和卡片都應(yīng)該使用標(biāo)準(zhǔn)曲線運(yùn)動(dòng)，保持平滑的開始和停止動(dòng)畫。在移動(dòng)設(shè)備上，這個(gè)動(dòng)畫大概持續(xù)300ms。

錯(cuò)誤：浮動(dòng)按鈕向上和向下的運(yùn)動(dòng)使用加速或減速曲線，會(huì)給人感覺非常突然的向上或者向下移動(dòng)。這樣的動(dòng)效讓人難以接受，體驗(yàn)受到破壞。

材料的形變

材料設(shè)計(jì)下的物體可以很生動(dòng)的展現(xiàn)：疊加、分割、改變形狀和大小。

矩形的形變

物體改形狀和大小時(shí)，寬和高的運(yùn)動(dòng)曲線是非對(duì)稱的。這種變化是根據(jù)物體附近的內(nèi)在或外在元素來進(jìn)行改變的。

所有的變化都是在屏幕上可見的，例如下面的幾個(gè)例子，使用了標(biāo)準(zhǔn)曲線（具體參見持續(xù)時(shí)間與緩動(dòng)篇）。

寬和高的變化

當(dāng)物體擴(kuò)大或縮小時(shí)，使用對(duì)稱或非對(duì)成的寬高變化。

非對(duì)稱變化

是指寬度和高度以不同的速率變化。對(duì)于多個(gè)物體或位置的變化，使用非對(duì)稱變化再合適不過了。

非對(duì)稱變化

物體的擴(kuò)大：先改變寬，再改變高。物體的縮?。合雀淖兏?，再改變寬。

對(duì)稱變化是指寬度和高度以同樣的速率變化。適合用于單個(gè)元素沿著單一的軸線的運(yùn)動(dòng)。

對(duì)稱變化

這種同時(shí)改變寬高，減少動(dòng)畫細(xì)節(jié)的方式非常適合簡單的形狀變化。這種變化的持續(xù)時(shí)間會(huì)比非對(duì)稱變化稍短一些。

當(dāng)一組物體的擴(kuò)大不同步時(shí)，含有內(nèi)容（如文字或圖像）的部分改變大小，是以恒定的比率來進(jìn)行的，這樣可以防止不自然的拉伸。有關(guān)內(nèi)容請(qǐng)查閱《動(dòng)效的組合》部分內(nèi)容。

有些特殊內(nèi)容（例如含有全屏寬度圖像）的變化是以恒定的比率進(jìn)行的，承載它的容器（例如一個(gè)更大的卡片）的變化是不同步地沿著運(yùn)動(dòng)曲線進(jìn)行的。

含有出血內(nèi)容（例如超過出血線的圖像）的容器是可以同步擴(kuò)大的。

徑向形變

徑向變化是從用戶的觸摸點(diǎn)產(chǎn)生的對(duì)稱的、環(huán)形可視化的效果。通常用在圓形的物體上，讓圓形變成其他形狀。

正確：徑向變化應(yīng)該用在圓形的物體上，讓圓形物體變成方形，或者在觸摸點(diǎn)創(chuàng)建一個(gè)新的物體出來。

錯(cuò)誤：不要在兩個(gè)方形物體間的變化使用徑向變化。

錯(cuò)誤：高寬的擴(kuò)展不要不同步（中間會(huì)變成一個(gè)橢圓）。

錯(cuò)誤：不要徑向變化復(fù)雜的形狀。

形變的變化中心點(diǎn)可以在物體改變前的位置，也可以在物體改變后的位置。

在擴(kuò)張的過程中，浮動(dòng)按鈕的運(yùn)動(dòng)是沿著一個(gè)向下的弧線，最終變成一張卡片。

變換的中心點(diǎn)保持在浮動(dòng)按鈕的中心點(diǎn)，幅度不大的擴(kuò)張。

合并 & 分割

合并

在材料設(shè)計(jì)中，物體可以和其他物體合并，也可以分割成很多塊。兩個(gè)物體相互接近時(shí)，邊緣相遇然后重疊，最后合二為一。

分割

物體分割成多個(gè)碎片，然后碎片開始分離運(yùn)動(dòng)。

陰影

分割開的物體的陰影不會(huì)被其他被分割物體所影響。

原文地址：google.com

譯者：@平行煎餅

原文來自：優(yōu)設(shè)

系列文章直達(dá)電梯

1）新版Material Design 官方動(dòng)效指南

2）新版MATERIAL DESIGN 官方動(dòng)效指南（二）

3）新版MATERIAL DESIGN 官方動(dòng)效指南（三）