在Material design的世界中蚜点，動(dòng)效用一種優(yōu)雅轧房、流動(dòng)的方式來描述空間關(guān)系、功能绍绘、和意向奶镶。
為什么說動(dòng)效很重要迟赃？
動(dòng)效可以向我們展示一個(gè)App 是如何構(gòu)成和用途。
動(dòng)效可以做到：
不同視圖之間的焦點(diǎn)引導(dǎo)厂镇。
當(dāng)用戶完成了一個(gè)手勢后纤壁，提示用戶將會(huì)發(fā)生什么
明確元素之間的層級和空間關(guān)系
當(dāng)程序在后臺運(yùn)行時(shí)，分散用戶的注意力（例如獲取內(nèi)容或載入下一個(gè)視圖）
潤色整個(gè)app：個(gè)性化捺信、令人愉悅
如何制作材料設(shè)計(jì)的動(dòng)效酌媒？
材料設(shè)計(jì)的運(yùn)動(dòng)吸取了一些真實(shí)世界的力學(xué)元素，例如重力和摩擦力迄靠。這些力反應(yīng)的是馍佑，用戶對屏幕操作的影響，以及這些元素是如何相互反饋的梨水。
材料設(shè)計(jì)的運(yùn)動(dòng)具有以下幾個(gè)特征：
1. 響應(yīng)式的
材料設(shè)計(jì)的動(dòng)效是充滿活力的拭荤。它能迅速精確響應(yīng)用戶用戶所觸發(fā)的內(nèi)容。
在移動(dòng)設(shè)備上的長動(dòng)畫大約是300-400ms疫诽，短動(dòng)畫大概是150-200ms舅世。過長的動(dòng)畫讓人感覺遲鈍，過短的動(dòng)畫讓人覺得難以看明白奇徒。
用戶觸摸屏幕時(shí)雏亚，通過漪漣動(dòng)畫能使用戶確認(rèn)輸入∧Ω疲卡片上升表示該卡片處于激活狀態(tài)罢低。
顯示觸發(fā)元件或動(dòng)作和創(chuàng)建出的新的卡片之間的聯(lián)系。
2.?自然的
材料設(shè)計(jì)的動(dòng)效通過模仿真實(shí)世界的力胖笛，而展現(xiàn)了自然的運(yùn)動(dòng)過程网持。
在真實(shí)的世界中，一個(gè)物體可以被重量长踊、表面摩擦力影響很快的加速或減速功舀。同樣的，材料設(shè)計(jì)的動(dòng)效也是不會(huì)發(fā)生突然停止身弊，或者突然啟動(dòng)辟汰，都是會(huì)有一個(gè)加速度或者減速度。（紅色沒緩動(dòng)阱佛，藍(lán)色有緩動(dòng)）
真實(shí)世界中的力帖汞，例如重力，能使一個(gè)元素沿曲線運(yùn)動(dòng)而非直線運(yùn)動(dòng)凑术。
材料設(shè)計(jì)的動(dòng)效轉(zhuǎn)場是沿著一個(gè)弧線的翩蘸。
3.?可察覺的
材料設(shè)計(jì)的動(dòng)效是可以被周圍環(huán)境察覺的，包括用戶和周圍其他的元素麦萤。它可以被物體吸引鹿鳖，并且恰當(dāng)?shù)幕貞?yīng)用戶的意圖扁眯。
作為過渡元素，他們和他們周圍元素的運(yùn)動(dòng)是精心安排的翅帜，可以通過這個(gè)過程看出他們之間的關(guān)系姻檀。
卡片可以推動(dòng)其他卡片，讓他們給自己讓開路涝滴。
元素可能會(huì)吸引其他元素加入绣版，當(dāng)他們相互接近時(shí)合為一體。
4. 有引導(dǎo)意向的
材料設(shè)計(jì)的動(dòng)效能使焦點(diǎn)在對的時(shí)間聚焦在對的點(diǎn)歼疮。
轉(zhuǎn)場動(dòng)畫有助于引導(dǎo)用戶進(jìn)行下一步的交互杂抽。
運(yùn)動(dòng)可以傳遞不同的信號，例如韩脏，一個(gè)操作是否不可用缩麸。
動(dòng)畫能使用戶關(guān)注特定對象。
如何設(shè)計(jì)一個(gè)好的轉(zhuǎn)場動(dòng)畫赡矢？
好的動(dòng)效設(shè)計(jì)應(yīng)該遵從以下幾點(diǎn)：
1. 動(dòng)效是很快的
一個(gè)交互動(dòng)作不應(yīng)該讓用戶做不必要的等待杭朱。
正確：動(dòng)畫一定要快，用戶無須等待動(dòng)畫完成吹散。
錯(cuò)誤：很多元素磨磨蹭蹭很慢的運(yùn)動(dòng)弧械，令動(dòng)畫時(shí)長延長。
2.?動(dòng)效是明確的
轉(zhuǎn)場動(dòng)畫應(yīng)該明確空民，簡單刃唐，一致。應(yīng)該避免一次有太多的元素動(dòng)效界轩。
由于動(dòng)圖太大画饥，上傳到網(wǎng)盤，麻煩大家查看：http://pan.baidu.com/s/1pLGM0en
正確：保持清晰的路徑進(jìn)入下一個(gè)視圖耸棒，最好元件都編排成一個(gè)組荒澡。
由于動(dòng)圖太大已傳报辱，單擊可見：http://www.uisdc.com
錯(cuò)誤：多個(gè)元素移動(dòng)到不同的方向或者交叉路徑与殃，會(huì)造成轉(zhuǎn)場動(dòng)畫的混亂。
3.?動(dòng)效是統(tǒng)一的
材料設(shè)計(jì)的動(dòng)效是由速度碍现、響應(yīng)性幅疼、和意向所統(tǒng)一的。在App 中的任何自定義動(dòng)效體驗(yàn)都應(yīng)該貫穿整一個(gè)App昼接。
即使這些app有著不同的功能爽篷，但是他們相似的動(dòng)畫體驗(yàn)讓人感覺他們是有關(guān)聯(lián)的。
動(dòng)效的意義
動(dòng)效的好處可以從以下兩個(gè)例子中明顯看出：其中一個(gè)app遵從這些模式慢睡，而另一個(gè)沒有遵從逐工。
正確：在轉(zhuǎn)場的過程總铡溪，用戶被引導(dǎo)到了下一個(gè)視圖。表層的轉(zhuǎn)場清晰的傳達(dá)出層級關(guān)系泪喊。loading的過程在后臺進(jìn)行棕硫，以減少延遲時(shí)間。
錯(cuò)誤：轉(zhuǎn)場的發(fā)生點(diǎn)沒有一個(gè)清晰的焦點(diǎn)袒啼，所以看不出來新的頁面和舊的頁面之間的聯(lián)系哈扮。沒有感覺到有任何層級的關(guān)系，loading用一個(gè)轉(zhuǎn)圈的半圓表現(xiàn)太明顯了蚓再，令人感到延遲感滑肉。
原文地址：google.com
譯者：@平行煎餅
