起點(diǎn)課堂會員權(quán)益
職業(yè)體系課特權(quán)
線下行業(yè)大會特權(quán)
個人IP打造特權(quán)
30+門專項(xiàng)技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導(dǎo)直播
12場專業(yè)技能直播
會員專屬社群
榮耀標(biāo)識新版MATERIAL DESIGN 官方動效指南（二）
Material Design的動效設(shè)計(jì)是響應(yīng)式的，自然的。使用緩動曲線和持續(xù)時間模式可以創(chuàng)建平滑、一致的動效。
速度
某個元素移動或者改變狀態(tài)的時候，運(yùn)動速度應(yīng)該足夠快，使用戶不用等待。出現(xiàn)頻率高的轉(zhuǎn)場動畫應(yīng)該短一點(diǎn)，而有些轉(zhuǎn)場動畫要慢一點(diǎn)，來保證用戶能理解它。
正確：動效應(yīng)該足夠快，讓用戶不用等待動畫完成。
錯誤：不要做無意義的拖延。
動態(tài)持續(xù)時間
應(yīng)該調(diào)整每個持續(xù)時間，來適應(yīng)不同的移動距離、每個元素的速度、和表面的變化。而不是所有動畫都用同樣的持續(xù)時間。物體離開屏幕應(yīng)該是一個很短的持續(xù)時間，這樣用戶就會減少對他的注意力。
當(dāng)物體需要移動較大位移，或有很巨大的變化時，應(yīng)該占用更長的持續(xù)時間。
當(dāng)物體移動較小距離，或者有很微小的變化時，應(yīng)該減少持續(xù)時間，這樣就不會使動效看起來很慢很遲鈍。
通用持續(xù)時間
移動設(shè)備
移動設(shè)備上，動畫通常會持續(xù)300ms左右：
大而復(fù)雜的全屏移動設(shè)備上，通常需要更長的持續(xù)時間，375ms左右。
物體進(jìn)入屏幕的持續(xù)時間大概是225ms。
物體離開屏幕的持續(xù)時間大概是195ms。
動畫超過400ms會顯得慢而拖沓。
大屏幕移動設(shè)備
在大屏幕移動設(shè)備上，同一時間段內(nèi)，物體移動較長的距離速度比移動較短的距離更快。越大的屏幕物體移動的持續(xù)時間應(yīng)該更長，這樣動效不會顯得太快。
平板設(shè)備
平板設(shè)備上動效的持續(xù)時間應(yīng)該比移動設(shè)備長30%左右。移動設(shè)備上300ms的持續(xù)時間，在平板設(shè)備上應(yīng)該是390ms左右。
可穿戴設(shè)備
可穿戴設(shè)備上的動效時間應(yīng)該比移動設(shè)備上短30%左右。移動設(shè)備上300ms的持續(xù)時間，在可穿戴設(shè)備上應(yīng)該是210ms左右。
動效元素在大屏幕設(shè)備上會移動很大的距離，動畫可能會比小屏幕設(shè)備上看起來略為放緩。
桌面
桌面動畫應(yīng)該比移動設(shè)備上的動畫更快、更簡單。通常只會持續(xù)150ms到200ms。
由于桌面動畫可能不太引人注目，他們的響應(yīng)應(yīng)該更敏捷、更迅速。
復(fù)雜的網(wǎng)頁動畫肯能會導(dǎo)致掉幀（除非他們專門為GPU加速）。更短的持續(xù)時間可以讓動效快速完成，減少注意。
桌面動效明顯看起來更快。
自然的緩動曲線
緩動曲線可以對物體的速度、透明度、大小產(chǎn)生效果。
加速和減速變化應(yīng)該是應(yīng)該是平滑的貫穿于動畫的持續(xù)時間之中的，使動效看起來不會那么機(jī)械化。（紅色無緩動，藍(lán)色有緩動）
當(dāng)加速和減速不對稱時，動效會看起來更自然，更令人愉悅。（紅色對稱，藍(lán)色不對稱）
緩動曲線
緩動曲線可能會在不同的平臺或者軟件上有所不同。不同平臺上的緩動曲線準(zhǔn)則會涉及到普通緩動曲線、減速緩動曲線、加速緩動曲線，和急轉(zhuǎn)緩動曲線。
標(biāo)準(zhǔn)緩動曲線
這是最常見的緩動曲線。物體可以根據(jù)在屏幕上的位置迅速加速或緩慢減速。這個曲線適用于增加或減少元素，和其他屬性的變化。
減速曲線（“緩出”）
物體全速進(jìn)入進(jìn)入屏幕時，然后慢慢減速靜止在屏幕上的某個點(diǎn)。
在減速過程中，物體可能從很小變到正常大小，也可能從透明變到不透明。有時候，當(dāng)物體透明進(jìn)入屏幕，可能從稍大的大小縮小到正常的大小。
加速曲線（“緩進(jìn)”）
物體離開屏幕是以全速離開，他們離開屏幕時不會減速。
急轉(zhuǎn)曲線
急轉(zhuǎn)曲線被用于隨時離開屏幕隨時回到屏幕的情況。
物體可能會在屏幕上某一點(diǎn)迅速加速，然后以一個對稱的曲線快速減速運(yùn)動到屏幕外的某一點(diǎn)。減速會稍快于標(biāo)準(zhǔn)曲線，因?yàn)樗麄儾粫鹧谝粋€準(zhǔn)確的路徑到屏幕外的某一點(diǎn)。物體可能會隨時回到原點(diǎn)。
本章到此結(jié)束，如果想提前閱讀可到：https://www.google.com/design/spec/motion?查看。
譯文來自：優(yōu)設(shè)
原文地址：google.com
譯者：@平行煎餅
系列文章直達(dá)電梯
?? ?? ??