作者： [Taras Skytskyi]
鏈接：https://www.uisdc.com/ultimate-guide-to-ui-animation
動(dòng)畫效果如今已經(jīng)深入到 UI界面的每個(gè)角落蟆沫。屏與屏之間的切換因?yàn)閯?dòng)效而顯得更加連貫欢伏，交互的上下文邏輯也因?yàn)閯?dòng)效的加持而更加清晰。動(dòng)效對(duì)于產(chǎn)品和用戶而言齿风，都是一個(gè)不可多得的重要組成部分。但是當(dāng)我瀏覽相關(guān)的文章的時(shí)候，發(fā)現(xiàn)絕大多數(shù)的動(dòng)效有關(guān)的文章竹宋，都僅僅只是針對(duì)特定的動(dòng)效設(shè)計(jì)案例來進(jìn)行分析和描述，少有文章真正系統(tǒng)地闡述動(dòng)效應(yīng)該遵循怎樣的規(guī)則地技，符合什么樣的特征蜈七。這篇文章當(dāng)中，我不會(huì)講述什么新穎的技巧或者前沿的趨勢(shì)莫矗，但是我會(huì)將動(dòng)效設(shè)計(jì)的主要原則和標(biāo)準(zhǔn)都匯集到一起飒硅，總結(jié)出來。
有了這篇文章作谚，你就不用在其他地方學(xué)習(xí)基本的動(dòng)效設(shè)計(jì)規(guī)則了三娩。
動(dòng)效的持續(xù)時(shí)長(zhǎng)和速度
當(dāng)元素的位置和狀態(tài)發(fā)生改變的時(shí)候，動(dòng)效的速度應(yīng)該足夠慢妹懒，維持足夠長(zhǎng)的時(shí)間雀监，讓用戶能夠注意到變化，但是同時(shí)彬伦，又不能慢到需要用戶去等待滔悉。
大量的研究表明，動(dòng)效的最佳持續(xù)時(shí)長(zhǎng)是200毫秒到500毫秒之間单绑。這個(gè)研究數(shù)字是基于人腦的認(rèn)知方式和信息消化速度得出來的回官。任何低于100毫秒的動(dòng)效對(duì)于人的眼睛而言，幾乎都是瞬間搂橙，很難被識(shí)別出來歉提。而超過1秒的動(dòng)效會(huì)讓人有遲滯感。
△ 界面中動(dòng)效持續(xù)時(shí)長(zhǎng)
在手機(jī)這樣的移動(dòng)端設(shè)備上区转，按照 Material Design 的建議苔巨，動(dòng)效時(shí)長(zhǎng)應(yīng)該控制在200300毫秒之間，在平板電腦上废离，這個(gè)時(shí)長(zhǎng)應(yīng)該延長(zhǎng)大概30%侄泽，也就是說，時(shí)長(zhǎng)應(yīng)該在400450毫秒之間蜻韭。原因很簡(jiǎn)單悼尾，屏幕尺寸越大柿扣，元素在發(fā)生位移的時(shí)候，跨越的距離越長(zhǎng)闺魏，速度一定的情況下未状，時(shí)長(zhǎng)自然越長(zhǎng)。相應(yīng)的析桥，在可穿戴設(shè)備的小屏幕上司草，這個(gè)時(shí)長(zhǎng)應(yīng)該縮短30%，在150~200毫秒之間泡仗。
△ 移動(dòng)端設(shè)備的屏幕尺寸影響動(dòng)畫的持續(xù)時(shí)長(zhǎng)
網(wǎng)頁動(dòng)效的處理方式也不一樣埋虹。由于我們習(xí)慣在瀏覽器中直接打開網(wǎng)頁，考慮到瀏覽器性能和大家的使用習(xí)慣娩怎，用戶對(duì)于瀏覽器中動(dòng)效變化速率的預(yù)期還是比較快的吨岭。相比于移動(dòng)端中的動(dòng)效速度，網(wǎng)頁中的速度會(huì)快上一倍峦树，換句話說，就是動(dòng)效的持續(xù)時(shí)長(zhǎng)應(yīng)該在150~200毫秒之間旦事。如果持續(xù)時(shí)間太長(zhǎng)魁巩，用戶會(huì)忍不住覺得網(wǎng)頁卡住了。
不過姐浮，如果你的網(wǎng)頁中所用的動(dòng)效并非功能性的谷遂，而是裝飾用的，或者用來吸引用戶的注意力卖鲤，那么請(qǐng)忘記這個(gè)規(guī)則肾扰，在這種情況下，動(dòng)效可以更長(zhǎng)蛋逾。
更大的屏幕=更慢的動(dòng)效集晚？絕不是如此！
請(qǐng)務(wù)必記住区匣，無論是在什么平臺(tái)上偷拔，動(dòng)效的持續(xù)時(shí)長(zhǎng)絕不是單純?nèi)Q于屏幕尺寸和運(yùn)動(dòng)距離，還取決于平臺(tái)特征亏钩、元素大小莲绰、功能設(shè)定等等。較小的元素或者較小的變化姑丑，相應(yīng)的動(dòng)效應(yīng)該更快一點(diǎn)蛤签。因此，大而復(fù)雜的元素動(dòng)效持續(xù)時(shí)間更長(zhǎng)栅哀，看起來也更舒服一點(diǎn)震肮。
大小相同的元素称龙，在移動(dòng)的時(shí)候，移動(dòng)距離最短的元素钙蒙，是最先停止下來的茵瀑。
與較大的元素相比，較小的元素運(yùn)動(dòng)速度應(yīng)該更慢躬厌，因?yàn)橄嗤囊苿?dòng)距離马昨，對(duì)于小元素而言，位移距離和自身大小比例倍數(shù)更大扛施，相對(duì)偏移更遠(yuǎn)鸿捧。
△ 動(dòng)效的持續(xù)時(shí)長(zhǎng)還和元素大小、運(yùn)動(dòng)距離有關(guān)
動(dòng)效的運(yùn)動(dòng)規(guī)律要符合物理規(guī)律疙渣，當(dāng)元素運(yùn)動(dòng)到邊界匙奴，發(fā)生碰撞的時(shí)候，碰撞的「能量」最終是要均勻分?jǐn)傁聛淼耐螅鴱椞奶匦г诙鄶?shù)情況下是不適合的泼菌，僅在特殊情況下適合使用。
△ 避免使用彈跳特效啦租，它會(huì)分散用戶的注意力
元素的運(yùn)動(dòng)過程應(yīng)該是清晰的哗伯，盡量不要在運(yùn)動(dòng)中使用模糊的效果（是的，說的就是 AE 的模糊動(dòng)效愛好者們）篷角，模糊的動(dòng)效不適合在 UI界面中使用焊刹。
△ 不要在動(dòng)效中使用模糊效果
列表項(xiàng)（新聞列表、郵件列表等）所使用的動(dòng)效恳蹲，在實(shí)際運(yùn)動(dòng)的過程中虐块，項(xiàng)和項(xiàng)之間應(yīng)該有輕微的延遲，元素之間的延遲應(yīng)該控制在20~25毫秒之間嘉蕾，如果持續(xù)時(shí)間再長(zhǎng)贺奠，可能會(huì)給人一種遲滯的觀感。
△ 列表項(xiàng)之間的延遲應(yīng)該在20~25毫秒
緩動(dòng)
緩動(dòng)指的是物體在物理規(guī)則下错忱，漸進(jìn)加速或減速的現(xiàn)象敞嗡。在動(dòng)效中加入緩動(dòng)的效果能夠讓運(yùn)動(dòng)顯得更加自然，這是運(yùn)動(dòng)的基本原則之一航背。對(duì)于緩動(dòng)喉悴，迪士尼的兩位關(guān)鍵性的動(dòng)畫大師 Ollie Johnston 和 Frank Thomas 在他們的著作《The Illusion of Life: Disney Animation》中有過非常詳盡的描述。
為了不讓動(dòng)效看起來機(jī)械或者人工痕跡太明顯玖媚，元素的運(yùn)動(dòng)應(yīng)該有漸進(jìn)加速和漸進(jìn)減速的特征箕肃，就像物理世界當(dāng)中其他的物體這樣。
勻速直線運(yùn)動(dòng)
不受任何物理力量的影響今魔，勻速直線運(yùn)動(dòng)看起來是非常不自然的勺像，尤其是對(duì)于人眼而言障贸。
所有用來設(shè)計(jì)動(dòng)畫的應(yīng)用都會(huì)使用坐標(biāo)軸和曲線來闡述動(dòng)效的運(yùn)動(dòng)特征，我將嘗試闡述它們的含義吟宦，以及如何使用篮洁。坐標(biāo)軸的 X軸是實(shí)現(xiàn)，而 Y軸則表示的唯一殃姓，換句話來說袁波，如同我們?cè)诔踔形锢碇兴鶎W(xué)到的，坐標(biāo)軸上的線條描述的是速度和加速度的特征蜗侈。下面所示的直線篷牌，表示速度是均勻的，也就是勻速直線運(yùn)動(dòng)踏幻，物體在相同時(shí)間內(nèi)運(yùn)動(dòng)的距離是不變的枷颊。
△ 勻速直線運(yùn)動(dòng)的座標(biāo)圖
均勻的變化通常只會(huì)用在色彩的改變或者透明的改變上，一般來說该面，我們也可以讓背景元素均勻運(yùn)動(dòng)夭苗，而前景元素保持不變，來呈現(xiàn)它的狀態(tài)隔缀，就像上圖一樣听诸。
緩動(dòng)加速曲線
通過曲線我們可以看到，物體開始時(shí)候的初速度比較低蚕泽，運(yùn)動(dòng)緩慢，隨后速度逐漸增加桥嗤，這意味著物體在加速運(yùn)動(dòng)须妻。
△ 加速曲線
當(dāng)物體加速飛出屏幕的時(shí)候，可以使用這種加速曲線泛领，比如界面中被用戶使用滑動(dòng)手勢(shì)甩出去的卡片荒吏。但是請(qǐng)記住，只有當(dāng)運(yùn)動(dòng)對(duì)象需要完全離開界面的時(shí)候才會(huì)這么使用渊鞋，如果它還需要再回來的話绰更，則不行。
△ 以加速運(yùn)動(dòng)將卡片扔出屏幕
動(dòng)畫曲線有助于正確傳達(dá)訊息锡宋，甚至表達(dá)情緒和感覺儡湾。在下面的案例當(dāng)中，我們可以看每個(gè)元素的運(yùn)動(dòng)位移是完全一樣的执俩，所消耗的總時(shí)長(zhǎng)也是一樣的徐钠，但是運(yùn)動(dòng)的速率變化是不同的，這一點(diǎn)也體現(xiàn)在曲線上役首，所表現(xiàn)出來的情緒也不同尝丐。當(dāng)然显拜，通過調(diào)整曲線，你能夠讓物體的運(yùn)動(dòng)軌跡盡可能接近現(xiàn)實(shí)世界爹袁。
緩動(dòng)減速曲線
當(dāng)元素從屏幕外運(yùn)動(dòng)到屏幕內(nèi)的時(shí)候远荠，動(dòng)效應(yīng)該遵循這類曲線的運(yùn)動(dòng)特征。從全速進(jìn)入屏幕開始失息，速度降低譬淳，直到完全停止。
△ 減速曲線
減速曲線可以適用于多種不同的 UI控件和元素根时，包括從屏幕外進(jìn)入屏幕內(nèi)的的卡片瘦赫、條目等。
△ 減速曲線案例
緩動(dòng)標(biāo)準(zhǔn)曲線
在這種曲線之下蛤迎，物體從靜止開始加速确虱，到達(dá)速度最高點(diǎn)之后開始減速直到靜止。這種類型的元素在 UI界面中最為常見替裆，每當(dāng)你不知道要在動(dòng)效中使用哪種運(yùn)動(dòng)方式的時(shí)候校辩，可以試試標(biāo)準(zhǔn)曲線。
△ 標(biāo)準(zhǔn)曲線
根據(jù) Material Design 的規(guī)范辆童，最好使用不那么對(duì)稱的增速和減速的過程宜咒，讓動(dòng)效看起來更加真實(shí)。同時(shí)大家會(huì)更加在意運(yùn)動(dòng)的結(jié)果把鉴，曲線的末端故黑，也就是運(yùn)動(dòng)結(jié)束的過程最好進(jìn)行適當(dāng)?shù)膹?qiáng)調(diào)，換句話說就是減速過程持續(xù)的時(shí)長(zhǎng)最好超過開始加速的時(shí)長(zhǎng)庭砍，用戶將會(huì)更加清楚地觀察到運(yùn)動(dòng)的最終結(jié)果场晶，從而更好地明白運(yùn)動(dòng)的終止?fàn)顟B(tài)。
△ 對(duì)稱和非對(duì)稱運(yùn)動(dòng)的差異
當(dāng)元素從屏幕的一個(gè)位置移動(dòng)到另外一個(gè)位置的時(shí)候怠缸，最好使用這種標(biāo)準(zhǔn)的緩動(dòng)曲線诗轻，這個(gè)過程中，盡量不要讓動(dòng)畫效果引人注意揭北，不要使用戲劇化的效果扳炬。
△ 卡片元素從屏幕上運(yùn)動(dòng)的時(shí)候，不對(duì)稱的緩動(dòng)曲線
當(dāng)元素從屏幕上消失的時(shí)候搔体，采用了相同的不對(duì)稱緩動(dòng)曲線恨樟，用戶同樣可以通過滑動(dòng)回到之前的位置。這個(gè)環(huán)節(jié)使用了抽屜式導(dǎo)航控件疚俱。
△ 抽屜式導(dǎo)航隨著緩動(dòng)曲線從屏幕上隱藏
從這些案例當(dāng)中厌杜，可以看出許多動(dòng)效的初學(xué)者對(duì)于運(yùn)動(dòng)規(guī)則的了解還不足。比如下面的這個(gè)動(dòng)效，元素隨著減速曲線出現(xiàn)夯尽，然后使用標(biāo)準(zhǔn)緩動(dòng)曲線消失瞧壮。根據(jù) Material Design 的標(biāo)準(zhǔn)，新出現(xiàn)的元素持續(xù)的時(shí)間應(yīng)該更長(zhǎng)匙握，因?yàn)樾枰嗟淖⒁饬Α?/p>
△ 導(dǎo)航菜單的出現(xiàn)和消失
貝賽爾曲線函數(shù) cubic-bezier（）是用來描述曲線的县好，它的名字前面之所以帶有 Cubic 是因?yàn)槊總€(gè)貝賽爾曲線的描述都是基于四個(gè)不同的參數(shù)來確定的拄衰。曲線的起點(diǎn)（0，0）和終點(diǎn)（1，1）在坐標(biāo)軸上的位置是已經(jīng)事先確定的缴淋。
為了簡(jiǎn)化你對(duì)于貝賽爾曲線的理解戚长，我們推薦兩個(gè)網(wǎng)站敦腔，分別是 easings.net 和 cubic-bezier.com 缆八，前者包含了最常見的曲線的列表，你可以將他們復(fù)制到你的原型工具中蛔琅，第二個(gè)網(wǎng)站為你提供了不同曲線的參數(shù)胎许，你可以直接在其中查看各種對(duì)象的移動(dòng)方式。
△ 不同類型的 cubic-bezier（）的曲線和參數(shù)
界面動(dòng)效的編排
就像芭蕾舞的舞蹈編排一樣罗售，動(dòng)畫效果也是需要編排的辜窑，它的主要目的是讓元素從一個(gè)狀態(tài)切換到下一個(gè)狀態(tài)，自然過渡寨躁，讓用戶的注意力自然地被引導(dǎo)過去穆碎。
編排有兩種不同的方式，一種是均等交互职恳，另一種是從屬交互所禀。
均等交互
均等交互意味著所有的元素和對(duì)象都遵循一個(gè)特定的編排的規(guī)則。
在這個(gè)實(shí)例當(dāng)中放钦，所有的卡片都遵循著一個(gè)方向來引導(dǎo)用戶的注意力色徘，自上到下地次第加載。相反最筒，沒有按照這樣清晰的規(guī)則來加載，用戶的注意力會(huì)被分散蔚叨，元素的外觀排布也會(huì)顯得比較糟糕床蜘。
△ 用戶的注意力應(yīng)該沿著一個(gè)流向來引導(dǎo)
至于表格式的布局，它相對(duì)就復(fù)雜一點(diǎn)蔑水。在這里邢锯，用戶的視線流向應(yīng)該是清晰的對(duì)角線方向，因此搀别，逐個(gè)區(qū)塊次第出現(xiàn)是一個(gè)糟糕的設(shè)計(jì)丹擎。這樣的逐個(gè)顯示，一方面耗時(shí)太長(zhǎng)，另一方面會(huì)讓用戶覺得元素的加載方式是鋸齒狀的蒂培，這種方式并不合理再愈。
△ 沿著對(duì)角線加載
從屬交互
從屬交互指的是使用一個(gè)中心對(duì)象作為主體，來吸引用戶的注意力护戳，而其他的元素從屬于它來逐步呈現(xiàn)翎冲。這樣的動(dòng)畫設(shè)計(jì)能夠創(chuàng)造更強(qiáng)的秩序感，讓主要的內(nèi)容更容易引起用戶的注意媳荒。
在其他的設(shè)計(jì)當(dāng)中抗悍，用戶很難搞清楚哪個(gè)才是主要的，因?yàn)樽⒁饬Ρ环稚⒘饲怼Ｒ虼私稍ǎ绻O(shè)置多個(gè)動(dòng)畫元素，應(yīng)該定義清楚誰為主鱼炒，誰是中心衔沼，并且盡量按照從屬關(guān)系來次第呈現(xiàn)不同的子元素。
如果只有一個(gè)中心對(duì)象田柔，那么其他的對(duì)象的運(yùn)動(dòng)方式都要受它制約俐巴，否則用戶分不清楚主次。
根據(jù) Material Design 的規(guī)定硬爆，當(dāng)元素不成比例地變幻尺寸的時(shí)候欣舵，它應(yīng)該沿著弧線運(yùn)動(dòng)，而不是直線運(yùn)動(dòng)缀磕，這樣有助于讓它看起來更加自然缘圈。所謂「不成比例」地變化指的是元素的長(zhǎng)和寬的變化并不是按照相同比例來縮放或者變化的，換句話來說袜蚕，變化的速度也不一樣糟把。（比如，方形變成矩形）
△ 不成比例地改變對(duì)象外觀的時(shí)候牲剃，運(yùn)動(dòng)軌跡應(yīng)該是弧線的
相反遣疯，如果元素是按照比例改變大小的時(shí)候，應(yīng)該沿著直線移動(dòng)凿傅，這樣不僅操作更加方便缠犀，而且更符合均勻變化的特征〈鲜妫看一下真實(shí)的案例辨液，你會(huì)發(fā)現(xiàn)直線的運(yùn)動(dòng)軌跡會(huì)更加合理。
△ 成比例變化大小的時(shí)候箱残，應(yīng)該沿著直線運(yùn)動(dòng)
當(dāng)元素不成比例放大的時(shí)候滔迈，運(yùn)動(dòng)軌跡是弧線止吁，而這種弧線運(yùn)動(dòng)軌跡有兩種不同的呈現(xiàn)一種，一種軌跡是初始方向?yàn)榇怪狈较蚨\(yùn)動(dòng)結(jié)束時(shí)瞬間運(yùn)動(dòng)方向是水平的（Horizontal out）燎悍，另外一種初始方向是水平方向而運(yùn)動(dòng)結(jié)束時(shí)瞬間運(yùn)動(dòng)方向是垂直的（Vertical out）敬惦。
那么怎么選取這個(gè)方向呢？很簡(jiǎn)單间涵，元素運(yùn)動(dòng)曲線的方向仁热，應(yīng)該是要向界面的主要運(yùn)動(dòng)方向的主軸靠攏重合。舉個(gè)例子勾哩，在下面的動(dòng)效當(dāng)中抗蠢，整個(gè)界面的滾動(dòng)方向是上下滾動(dòng)，主軸是縱向的思劳，因此迅矛，當(dāng)卡片點(diǎn)擊之后被展開的時(shí)候，會(huì)先向右水平移動(dòng)潜叛，并最終以垂直運(yùn)動(dòng)結(jié)束秽褒，運(yùn)動(dòng)的最終方向，切線是垂直的威兜，也就和垂直方向的主軸重合了销斟。
△ 元素按照弧線展開的時(shí)候，最終方向應(yīng)該和主軸重合
如果幾個(gè)不同的元素的運(yùn)動(dòng)軌跡相交椒舵，那么他們不能彼此穿越蚂踊。如果每個(gè)元素都必須通過某個(gè)交點(diǎn)，抵達(dá)另外一個(gè)位置笔宿，那么應(yīng)該次第減速犁钟，依次通過這個(gè)點(diǎn)，給彼此留出足夠的空間泼橘。另外一種選擇涝动，是元素不相交，而是像實(shí)體一樣在靠近的時(shí)候炬灭，彼此推開醋粟。為什么？因?yàn)槲覀兺ǔ＜俣ń缑嬷兴械脑囟嘉挥谕粋€(gè)平面當(dāng)中重归。
在運(yùn)動(dòng)過程中米愿，元素不應(yīng)彼此穿越，而應(yīng)該互相留出空間提前。
但是這一點(diǎn)也不是一成不變的吗货。在比較擁擠的界面當(dāng)中泳唠，某個(gè)元素可以「越過」其他的元素狈网，它同樣沒有穿過其他的元素消失，而是單純的移動(dòng)。這一點(diǎn)從某種意義上也是延續(xù)自我們?nèi)粘５奈锢硪?guī)律拓哺，只不過我們會(huì)默認(rèn)界面中的元素在這個(gè)情況下?lián)碛辛烁叨冗@樣的屬性勇垛。
△ 元素可以越過其他的元素運(yùn)動(dòng)
結(jié)語
我們總結(jié)了這么多動(dòng)效運(yùn)動(dòng)的規(guī)則和原則，從某種意義上還是延續(xù)自我們對(duì)于物理世界的認(rèn)知士鸥，摩擦力和加速度在虛擬界面中以另外的方式續(xù)存著闲孤。模仿現(xiàn)實(shí)世界的界面讓我們對(duì)于界面的秩序有更清晰的認(rèn)知，允許我們更輕松的了解和訪問界面的內(nèi)容烤礁。
如果動(dòng)效按照正確的方式來設(shè)計(jì)讼积，它應(yīng)該是不顯著，且不會(huì)分散用戶注意力的脚仔。如果不是這樣勤众，那么你需要讓動(dòng)效更微妙一點(diǎn)，實(shí)在不行甚至需要將它移除鲤脏。動(dòng)效不應(yīng)該成為影響用戶操控界面的障礙们颜，或者轉(zhuǎn)移注意力的存在。
當(dāng)然猎醇，即使是遵循這么多規(guī)律窥突，動(dòng)效的設(shè)計(jì)依然是一門藝術(shù)，而非單純的科學(xué)硫嘶，多做測(cè)試多摸索總是有必要的阻问。
