Material Design的動效設計是響應式的瘟檩,自然的抹缕。使用緩動曲線和持續(xù)時間模式可以創(chuàng)建平滑、一致的動效芒帕。
速度
某個元素移動或者改變狀態(tài)的時候歉嗓,運動速度應該足夠快,使用戶不用等待背蟆。出現(xiàn)頻率高的轉場動畫應該短一點,而有些轉場動畫要慢一點哮幢,來保證用戶能理解它带膀。
正確:動效應該足夠快,讓用戶不用等待動畫完成橙垢。
錯誤:不要做無意義的拖延垛叨。
動態(tài)持續(xù)時間
應該調整每個持續(xù)時間,來適應不同的移動距離柜某、每個元素的速度嗽元、和表面的變化。而不是所有動畫都用同樣的持續(xù)時間喂击。物體離開屏幕應該是一個很短的持續(xù)時間剂癌,這樣用戶就會減少對他的注意力。
當物體需要移動較大位移翰绊,或有很巨大的變化時佩谷,應該占用更長的持續(xù)時間旁壮。
當物體移動較小距離,或者有很微小的變化時谐檀,應該減少持續(xù)時間抡谐,這樣就不會使動效看起來很慢很遲鈍。
通用持續(xù)時間
移動設備
移動設備上桐猬,動畫通常會持續(xù)300ms左右:
大而復雜的全屏移動設備上麦撵,通常需要更長的持續(xù)時間,375ms左右溃肪。
物體進入屏幕的持續(xù)時間大概是225ms免胃。
物體離開屏幕的持續(xù)時間大概是195ms。
動畫超過400ms會顯得慢而拖沓乍惊。
大屏幕移動設備
在大屏幕移動設備上杜秸,同一時間段內(nèi),物體移動較長的距離速度比移動較短的距離更快润绎。越大的屏幕物體移動的持續(xù)時間應該更長撬碟,這樣動效不會顯得太快。
平板設備
平板設備上動效的持續(xù)時間應該比移動設備長30%左右莉撇。移動設備上300ms的持續(xù)時間呢蛤,在平板設備上應該是390ms左右。
可穿戴設備
可穿戴設備上的動效時間應該比移動設備上短30%左右棍郎。移動設備上300ms的持續(xù)時間其障,在可穿戴設備上應該是210ms左右。
動效元素在大屏幕設備上會移動很大的距離涂佃,動畫可能會比小屏幕設備上看起來略為放緩励翼。
桌面
桌面動畫應該比移動設備上的動畫更快、更簡單辜荠。通常只會持續(xù)150ms到200ms汽抚。
由于桌面動畫可能不太引人注目,他們的響應應該更敏捷伯病、更迅速造烁。
復雜的網(wǎng)頁動畫肯能會導致掉幀(除非他們專門為GPU加速)。更短的持續(xù)時間可以讓動效快速完成午笛,減少注意惭蟋。
桌面動效明顯看起來更快。
自然的緩動曲線
緩動曲線可以對物體的速度药磺、透明度告组、大小產(chǎn)生效果。
加速和減速變化應該是應該是平滑的貫穿于動畫的持續(xù)時間之中的与涡,使動效看起來不會那么機械化惹谐。(紅色無緩動持偏,藍色有緩動)
當加速和減速不對稱時,動效會看起來更自然氨肌,更令人愉悅鸿秆。(紅色對稱,藍色不對稱)
緩動曲線
緩動曲線可能會在不同的平臺或者軟件上有所不同怎囚。不同平臺上的緩動曲線準則會涉及到普通緩動曲線卿叽、減速緩動曲線、加速緩動曲線恳守,和急轉緩動曲線考婴。
標準緩動曲線
這是最常見的緩動曲線。物體可以根據(jù)在屏幕上的位置迅速加速或緩慢減速催烘。這個曲線適用于增加或減少元素沥阱,和其他屬性的變化。
減速曲線(“緩出”)
物體全速進入進入屏幕時伊群,然后慢慢減速靜止在屏幕上的某個點考杉。
在減速過程中,物體可能從很小變到正常大小舰始,也可能從透明變到不透明崇棠。有時候,當物體透明進入屏幕丸卷,可能從稍大的大小縮小到正常的大小枕稀。
加速曲線(“緩進”)
物體離開屏幕是以全速離開,他們離開屏幕時不會減速谜嫉。
急轉曲線
急轉曲線被用于隨時離開屏幕隨時回到屏幕的情況萎坷。
物體可能會在屏幕上某一點迅速加速,然后以一個對稱的曲線快速減速運動到屏幕外的某一點沐兰。減速會稍快于標準曲線食铐,因為他們不會尊循于一個準確的路徑到屏幕外的某一點。物體可能會隨時回到原點僧鲁。
譯文來自:優(yōu)設? ?原文地址:google.com??譯者:@平行煎餅