運動
Material design 的動效會被類似真實世界中的力的影響,類似重力义桂。
物體在屏幕內的運動
屏幕內物體在兩點之間的運動,是沿著一條自然慷吊、凹陷的弧線。屏幕上所有的運動都可以使用標準曲線耘婚。
弧線向上運動
在現(xiàn)實世界中,物體向上運動需要克服重力沐祷。元素在屏幕中向上運動,同樣也是需要克服一個加速度赖临,較慢的向上運動。
正確:當物體向上對角運動時兢榨,平緩開始上升,急劇停止在終點吵聪。
錯誤:不要違反物理定律:當物體向上運動時無視重力,這樣會顯得不自然吟逝。
弧線向下運動
在現(xiàn)實世界中,物體下降會受到重力的加速度块攒。在屏幕中佃乘,物體向下移動速度應該會更快一點。
正確:當物體向下對角運動時趣避,下降開始急劇,然后平緩停止新翎。
錯誤:不要違反物理定律:向下運動的時候別忘記了向下的重力。
非弧線運動
當物體沿著水平軸線或者垂直軸線運動時骆捧,請不要讓讓物體沿著弧線運動。這些運動時最簡單的髓绽,物體可以以一個比較快的速度運動妆绞。
正確:保持單軸的直線運動。
錯誤:在水平或垂直方向上括饶,不要讓物體沿著不自然的弧線運動。
物體進入或退出屏幕時图焰,也應該沿著單軸運動。
正確:物體沿著直線路徑進入屏幕技羔,可以很明確的看見進入點。
錯誤:進入和離開屏幕時不要沿著弧線藤滥,這樣會讓人搞不清楚進入點到底在哪里。
物體進入和退出屏幕的運動
獨立運動
物體做為一個獨立的元素拙绊,進入退出屏幕不影響到屏幕上其他元素的位置向图。
進入屏幕
物體是以減速曲線(具體參見持續(xù)時間與緩動篇)進入屏幕标沪,以最大速度進入榄攀,然后再慢慢減速金句。
永久離開屏幕
物體以加速曲線(具體參見持續(xù)時間與緩動篇)永久離開屏幕,在很短時間內快速離開屏幕趴梢,因為他們不會再重返屏幕币他,所以應該減少用戶對它的關注。
正確:物體以減速曲線進入屏幕應該不要影響到屏幕上其他物體的位置蝴悉。在移動設備上,這種運動通暢持續(xù)225ms左右瘾敢。同樣的物體使用加速曲線永久離開屏幕,在移動設備上簇抵,大概持續(xù)195ms。
錯誤:這兩種情況都不要使用標準曲線(具體參見持續(xù)時間與緩動篇)碟摆。物體進入屏幕時,緩慢加速的過程會吸引用戶不必要的注意力(用戶的注意力應該放在最后停留的點上)典蜕。物體離開屏幕時,緩慢的減速同樣是不必要的愉舔,因為物體運動的終點在屏幕外钢猛,是不可見的轩缤。
暫時離開屏幕
物體暫時離開屏幕應該使用急轉曲線(具體參見持續(xù)時間與緩動篇),出現(xiàn)點和消失點距離應該很近火的,這樣他們可以隨時回到屏幕壶愤。
離開屏幕的物體從原路返回卫玖,離開時物體的運動應該使用急轉曲線,返回時使用減速曲線假瞬。在移動設備上陕靠,這個動畫通常會持續(xù)300ms左右脱茉。
離開屏幕的物體從其他路徑返回或者永久離開屏幕時,離開時物體的運動應該使用加速曲線琴许,如有返回,則使用減速曲線。
關聯(lián)運動
和屏幕上其他元素有聯(lián)動的進入或退出動畫益兄,應該使用平滑的緩動曲線,這樣他們可以盡量減少干擾净捅,避免太過搶眼疑枯,劇烈的運動蛔六。
標準曲線適用于關聯(lián)的多個物體進入退出屏幕。多個物體運動的標準曲線會比獨立物體的時間稍稍長一些国章。
正確:浮動按鈕的運動會受到從下方進入的卡片的影響具钥,浮動按鈕和卡片都應該使用標準曲線運動液兽,保持平滑的開始和停止動畫。在移動設備上四啰,這個動畫大概持續(xù)300ms桃漾。
錯誤:浮動按鈕向上和向下的運動使用加速或減速曲線拟逮,會給人感覺非常突然的向上或者向下移動适滓。這樣的動效讓人難以接受敦迄,體驗受到破壞凭迹。
材料的形變
材料設計下的物體可以很生動的展現(xiàn):疊加罚屋、分割嗅绸、改變形狀和大小脾猛。
矩形的形變
物體改形狀和大小時鱼鸠,寬和高的運動曲線是非對稱的猛拴。這種變化是根據(jù)物體附近的內在或外在元素來進行改變的蚀狰。
所有的變化都是在屏幕上可見的愉昆,例如下面的幾個例子麻蹋,使用了標準曲線(具體參見持續(xù)時間與緩動篇)。
寬和高的變化
當物體擴大或縮小時,使用對稱或非對成的寬高變化芳室。
非對稱變化
是指寬度和高度以不同的速率變化。對于多個物體或位置的變化堪侯,使用非對稱變化再合適不過了嚎尤。
非對稱變化
物體的擴大:先改變寬抖格,再改變高。物體的縮斜⒅簟:先改變高收奔,再改變寬滓玖。
對稱變化是指寬度和高度以同樣的速率變化。適合用于單個元素沿著單一的軸線的運動势篡。
對稱變化
這種同時改變寬高,減少動畫細節(jié)的方式非常適合簡單的形狀變化禁悠。這種變化的持續(xù)時間會比非對稱變化稍短一些念祭。
當一組物體的擴大不同步時碍侦,含有內容(如文字或圖像)的部分改變大小粱坤,是以恒定的比率來進行的瓷产,這樣可以防止不自然的拉伸站玄。有關內容請查閱《動效的組合》部分內容濒旦。
有些特殊內容(例如含有全屏寬度圖像)的變化是以恒定的比率進行的,承載它的容器(例如一個更大的卡片)的變化是不同步地沿著運動曲線進行的尔邓。
含有出血內容(例如超過出血線的圖像)的容器是可以同步擴大的。
徑向形變
徑向變化是從用戶的觸摸點產生的對稱的梯嗽、環(huán)形可視化的效果钞瀑。通常用在圓形的物體上慷荔,讓圓形變成其他形狀雕什。
正確:徑向變化應該用在圓形的物體上,讓圓形物體變成方形贷岸,或者在觸摸點創(chuàng)建一個新的物體出來。
錯誤:不要在兩個方形物體間的變化使用徑向變化偿警。
錯誤:高寬的擴展不要不同步(中間會變成一個橢圓)。
錯誤:不要徑向變化復雜的形狀螟蒸。
形變的變化中心點可以在物體改變前的位置,也可以在物體改變后的位置七嫌。
在擴張的過程中,浮動按鈕的運動是沿著一個向下的弧線诵原,最終變成一張卡片。
變換的中心點保持在浮動按鈕的中心點绍赛,幅度不大的擴張蔓纠。
合并 & 分割
合并
在材料設計中吗蚌,物體可以和其他物體合并腿倚,也可以分割成很多塊蚯妇。兩個物體相互接近時猴誊,邊緣相遇然后重疊侮措,最后合二為一。
分割
物體分割成多個碎片分扎,然后碎片開始分離運動。
陰影
分割開的物體的陰影不會被其他被分割物體所影響胧洒。
原文地址:google.com= ??譯者:@平行煎餅