這篇文章是關(guān)于變速過(guò)渡效果的，看似簡(jiǎn)單，但真正想讓動(dòng)畫(huà)自然流暢，還需要深入了解動(dòng)畫(huà)的基本原理。今天我們將會(huì)逐步學(xué)習(xí)：基本概念、探討加速減速，拆解緩沖曲線，最終學(xué)會(huì)運(yùn)用到界面設(shè)計(jì)中。

你認(rèn)為這兩個(gè)球在做什么？

綠球彈跳很明顯，但是紅球在怎樣運(yùn)動(dòng)？當(dāng)然，它像綠球一樣上下運(yùn)動(dòng)，落下和彈起所用的時(shí)間和綠球一樣。然而，紅球感覺(jué)很機(jī)械，而綠球讓人感覺(jué)它確實(shí)在彈跳。為什么我們會(huì)有這種感受上的差異呢？

答案是變速過(guò)渡效果（Easing）。

1、時(shí)間和空間位移（Timing and Spacing）

首先，我們需要理解兩個(gè)重要的概念——時(shí)間和空間，二者是緊密相關(guān)、密不可分的。為了使動(dòng)畫(huà)更有可讀性，他們至關(guān)重要。

注：“可讀性”是說(shuō)動(dòng)畫(huà)繪制者如何定義動(dòng)畫(huà)的精準(zhǔn)度，用來(lái)清晰而容易地理解正在發(fā)生的事情。例如：不可讀=不清楚發(fā)生的事情很易讀=它非常清楚，立刻能懂

時(shí)間

在案例中，兩個(gè)球在同一頂端同時(shí)落下，0.5秒到達(dá)地面， 1秒回到原位。這是球的時(shí)間?-?完成一個(gè)動(dòng)作所用的時(shí)間耗時(shí)。兩個(gè)球耗時(shí)相同，但是，等等……兩個(gè)球都是1秒的動(dòng)畫(huà)，為什么感覺(jué)如此不同呢？

空間位移

這是使兩個(gè)動(dòng)畫(huà)完全不同的關(guān)鍵區(qū)別。讓我們把第一個(gè)0.5秒的動(dòng)畫(huà)分解為較小的時(shí)間單位，這樣我們可以更清楚地觀察發(fā)生了什么。如果我們把每0.1秒球的位置進(jìn)行標(biāo)記，我們可以得到這張圖：

看到兩個(gè)時(shí)間單元之間的距離了嘛？這就是空間位移。很容易的東西，對(duì)嗎？時(shí)間是耗時(shí)，空間是位移！

讓我們來(lái)看紅球的間距?，非常均勻。每經(jīng)過(guò)0.1秒，它就移動(dòng)完全相同的距離。在運(yùn)動(dòng)中完全沒(méi)有任何變化。然而，綠球每0.1秒都有不同的間隔。在第一個(gè)0.1s，它只移動(dòng)非常小的間距，當(dāng)它掉下來(lái)，間距變得越來(lái)越大，直到它終于打到地面。事實(shí)上，它耗費(fèi)了0.4秒來(lái)完成前半程，僅用了0.1秒完成后半程！

所以，問(wèn)題來(lái)了，為什么要用這樣的方式加長(zhǎng)每秒的間距呢？

觀察顯示世界

觀察彈跳一個(gè)球時(shí)會(huì)發(fā)生什么。自己嘗試一下或者觀察一些YouTube上的相關(guān)視頻。我發(fā)現(xiàn)兩個(gè)問(wèn)題：慢放的彈跳球和網(wǎng)球彈跳球。

彈跳背后的物理理論：

球剛開(kāi)始被放開(kāi)的時(shí)候，它有一個(gè)相對(duì)緩慢的速度。在重力的作用下，球的速度持續(xù)增長(zhǎng)，直到接觸地面的那一刻速度達(dá)到最大。地面給球反作用力，使它以幾乎相同的速度反彈回去。當(dāng)球移動(dòng)時(shí)，兩種力量作用正在球上?-?反彈的力、想把它拉下來(lái)的重力。反彈的力量正在慢慢釋放，這使得球隨著升高逐漸減低速度，直到它耗費(fèi)掉所有的反作用力，最終到達(dá)反彈的最高點(diǎn)。它在頂部停留一微秒，直到重力把它拉下來(lái)，使它像之前一樣加速下降。我用言語(yǔ)來(lái)描述這句話是有原因的。我們?cè)囍鴮⒁环N自然行為分解為具體的步驟，這樣我們就可以重新創(chuàng)造它。

有些關(guān)鍵的注意事項(xiàng)：

1、當(dāng)球在頂部，它是緩慢的。隨著下降，它的速度隨之增加。
2、在彈回來(lái)的時(shí)候，開(kāi)始時(shí)球的速度很快。到達(dá)頂點(diǎn)時(shí)，速度就慢下來(lái)了。
3、在同一時(shí)間內(nèi)，當(dāng)球速很快時(shí)，位移會(huì)很長(zhǎng)，當(dāng)球速變慢時(shí)，位移就少得多。

最后那句話聽(tīng)起來(lái)多余，但這正是我們感興趣的：一個(gè)速度快的物體在一個(gè)單位時(shí)間內(nèi)移動(dòng)了很長(zhǎng)的距離，而慢的物體在相同時(shí)間內(nèi)覆蓋較短的距離。

應(yīng)用我們觀察到的結(jié)論

讓我們把這個(gè)概念應(yīng)用到動(dòng)畫(huà)中。再看一下位移圖。在頂部間距小，每0.1s逐漸增加間距，最后，在底部達(dá)到最大間距。這正是我們?cè)谥暗难芯恐兴吹降摹Ｎ覀兒?jiǎn)單地把這一原則“復(fù)制”到綠球，返回的時(shí)候進(jìn)行逆向應(yīng)用，瞧?，這是個(gè)?彈跳的球！
注：不要羞于“照搬”大自然。你的觀眾會(huì)更快地與動(dòng)畫(huà)關(guān)聯(lián)起來(lái)，從而更容易讀懂動(dòng)畫(huà)。

讓我們?cè)倏匆淮渭t球，為什么一點(diǎn)兒不覺(jué)得紅球在彈跳？在理解了一個(gè)彈跳球的物理原理后，這個(gè)問(wèn)題就變得很清楚。每0.1秒內(nèi)紅球移動(dòng)了相同的距離，但是從研究中我們知道：一個(gè)跳躍的球不會(huì)像那樣移動(dòng)。因?yàn)椋鼪](méi)有像彈跳球一樣運(yùn)動(dòng)，看上去也感覺(jué)不像彈跳球。
那么，能有什么會(huì)像紅球以同樣如此精準(zhǔn)的時(shí)間、精確的間距進(jìn)行運(yùn)動(dòng)呢？當(dāng)然，機(jī)械機(jī)器人！紅球在“復(fù)制”機(jī)械機(jī)器人的間距。換句話說(shuō)，因?yàn)樗駲C(jī)器人一樣運(yùn)動(dòng)，它就讓人感覺(jué)很機(jī)械。道理真的很簡(jiǎn)單！

小結(jié)

聽(tīng)眾會(huì)不自覺(jué)地把動(dòng)畫(huà)和他們已知的東西關(guān)聯(lián)起來(lái)。如果動(dòng)畫(huà)讓人聯(lián)想到周圍的世界，它會(huì)看上去很自然。如果它讓人聯(lián)想到機(jī)器人，它會(huì)感覺(jué)很機(jī)械。如果它讓人聯(lián)想不到任何東西，就意味著動(dòng)畫(huà)看上去“很奇怪”。

2、漸快與漸慢（Ease-in and Ease-out）

現(xiàn)在你知道我們?yōu)槭裁礊樘S的球設(shè)置不均勻的間距了。這種不均勻間距的技術(shù)術(shù)語(yǔ)叫做變速過(guò)渡效果。根據(jù)你將它用于動(dòng)畫(huà)開(kāi)始還是結(jié)束，它被稱為漸快或漸慢。

漸快

當(dāng)球以慢速開(kāi)始并積累速度時(shí)，這一過(guò)程被稱為漸快。

漸慢

當(dāng)球以快速開(kāi)始并降低速度時(shí)，這一過(guò)程被稱為漸慢。

為了理解緩沖這一詞的定義，我們已經(jīng)查找了大量理論！

注意：這一術(shù)語(yǔ)有可能與其它術(shù)語(yǔ)混淆。如果你正在閱讀傳統(tǒng)的卡通書(shū)，例如迪斯尼的《生命的幻象》或《動(dòng)畫(huà)師的生存工具》，那么這些書(shū)會(huì)告訴你，當(dāng)一個(gè)物體開(kāi)始減速然后加速時(shí)，這一過(guò)程被稱為漸慢（ease-out），因?yàn)樗淖藨B(tài)在“緩慢輸出”。但是，在軟件產(chǎn)業(yè)（CSS動(dòng)畫(huà)，Adobe Edge等），這一過(guò)程被稱為漸快（ease in）！我不確定這一不同之處是怎么來(lái)的，但是不幸的是，這就是它的形成過(guò)程。所以，當(dāng)你在閱讀一篇文章時(shí)，而這篇文章把它們把“漸快”稱為“漸慢”，那么不要覺(jué)得困惑。看一眼你所在的網(wǎng)站你就懂了:D。

閱讀變速過(guò)渡的曲線圖

你會(huì)注意到，當(dāng)你打開(kāi)軟件包的時(shí)候，漸進(jìn)的功能不會(huì)為你展示像上圖那樣線性的層次。相反，你會(huì)得到這樣的曲線：

那么，這一曲線與我們到目前為止談?wù)摰囊磺惺虑橛惺裁搓P(guān)系呢？讓我們將曲線畫(huà)在圖表上，然后看看我們最終畫(huà)出了什么。這只是基礎(chǔ)數(shù)學(xué)而已——我們（應(yīng)該）在學(xué)校里已經(jīng)學(xué)過(guò)了。

這是我們的圖表——我們將要沿著x軸繪制時(shí)間，y軸繪制球的位置。為了方便起見(jiàn)，我們選擇了4個(gè)單位x軸，表示0.1秒，選擇1個(gè)單位y軸表示球在垂直運(yùn)動(dòng)中的10個(gè)像素。（圖6）

我測(cè)量了紅球的運(yùn)動(dòng)，并記錄了每經(jīng)過(guò)0.1秒時(shí)y的位置。這里是記錄的值：

時(shí)間 Y軸的位置（秒） : （像素）—————-0.0 : 00.1 : 34

0.2 : 68
0.3 : 102
0.4 : 136
0.5 : 170

我們注意到，每經(jīng)過(guò)0.1秒，紅球正好移動(dòng)了34個(gè)像素。如果我們把這一過(guò)程繪制在圖表上，并連點(diǎn)成線，我們就會(huì)得到一條直線。我們突然發(fā)現(xiàn)，這就是你在大多數(shù)軟件中看到的線性漸變圖形。

現(xiàn)在，讓我們對(duì)綠球做相同處理。

時(shí)間 Y軸的位置（秒） : （像素）—————-0.0 : 00.1 : 2

0.2 : 10
0.3 : 36
0.4 : 87
0.5 : 170

我得到的值是：每0.1秒，球在垂直位置的變化量都會(huì)不同。開(kāi)始時(shí)，它的變化很小（只有2個(gè)像素），然后緩慢增加。在最后0.1秒，它增加了高達(dá)83個(gè)像素。在圖表上繪制這些點(diǎn)，我們得到了這條曲線。

現(xiàn)在這幅圖看起來(lái)熟悉嗎？這就是那些圖標(biāo)的由來(lái)。它們表示變化率，或者我們現(xiàn)在已經(jīng)了解的間隔。

注意：你會(huì)在軟件中看到更多用于設(shè)置緩沖的選項(xiàng)，例如二次的、三次的、四次的等等。它們只是緩和程度更高的選擇，但是概念是相同的。只需記住——緩和的程度越高，你就會(huì)得到更多的緩和度。

3、變速過(guò)渡效果應(yīng)用在UI設(shè)計(jì)中

最后，讓我們看看這些怎么用在UI設(shè)計(jì)中。

并不是規(guī)則，只是工具（There are no rules. Only tools）- Glenn Vilppu

我并不十分建議在你的app設(shè)計(jì)中應(yīng)用漸慢、漸快的很多規(guī)則。但我可以提供一些它是如何被應(yīng)用在當(dāng)下時(shí)髦App里的常見(jiàn)的例子。
在移動(dòng)App中，你能看到的最常見(jiàn)的運(yùn)用是菜單滑動(dòng)。如果App沒(méi)有運(yùn)用這些變速過(guò)渡的效果，就會(huì)像是一下的例子：

有些乏味，難道不是嗎？讓我們應(yīng)用一些變速過(guò)渡的效果，看一看會(huì)發(fā)生什么？

恩~好多了！屏幕向外滑動(dòng)時(shí)我們應(yīng)用了漸快效果，當(dāng)向內(nèi)滑動(dòng)時(shí)我們應(yīng)用了漸慢的效果。

但是，為什么不能在屏幕向外滑動(dòng)時(shí)應(yīng)用漸慢的效果呢？

從技術(shù)上說(shuō)你是可以的，但這樣你會(huì)發(fā)現(xiàn)：當(dāng)用戶點(diǎn)擊一個(gè)按鈕時(shí)，固定的屏幕就會(huì)移動(dòng)。

當(dāng)畫(huà)面回滾的時(shí)候，屏幕就像一輛從制動(dòng)到停止前進(jìn)的汽車。它開(kāi)始時(shí)很快，然后減速到停止——這是一個(gè)漸慢過(guò)程。所以，如果你在解決一個(gè)特殊元素活動(dòng)方面存在問(wèn)題，可以嘗試將其與物理行為關(guān)聯(lián)。這樣，對(duì)于如何使用戶界面元素活動(dòng)的問(wèn)題就會(huì)迎刃而解。

現(xiàn)在你知道了這些動(dòng)態(tài)效果為什么會(huì)感覺(jué)很自然，你可以在App中去達(dá)到同樣的感覺(jué)效果。很高興看到你把這些觀念應(yīng)用到你的設(shè)計(jì)中。

這篇文章比我最初打算的要長(zhǎng)一些，希望它能幫助你更好的理解變速過(guò)渡效果。

【職場(chǎng)經(jīng)驗(yàn)之看完轉(zhuǎn)系列！】

想成為總監(jiān)？來(lái)看看這個(gè)！
《優(yōu)設(shè)重磅首發(fā)！聊聊從設(shè)計(jì)師到總監(jiān)的晉級(jí)路線》

牛魔王的重磅之作！面試到簡(jiǎn)歷全部搞定！
《優(yōu)設(shè)重磅首發(fā)！全方位揭開(kāi)簡(jiǎn)歷和面試話術(shù)的秘密》

成為職場(chǎng)大牛的11種必備能力！
《設(shè)計(jì)師進(jìn)階教程！成為優(yōu)秀設(shè)計(jì)師必備的11種職場(chǎng)能力》

原文地址：medium
譯文地址：百度MUX

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國(guó)內(nèi)人氣最高的網(wǎng)頁(yè)設(shè)計(jì)師學(xué)習(xí)平臺(tái)，專注分享網(wǎng)頁(yè)設(shè)計(jì)、無(wú)線端設(shè)計(jì)以及PS教程。
【特色推薦】
設(shè)計(jì)師需要讀的100本書(shū)：史上最全的設(shè)計(jì)師圖書(shū)導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計(jì)微博：擁有粉絲量100萬(wàn)的人氣微博@優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁(yè)設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com
———————————————————–
想在手機(jī)上、被窩里獲取設(shè)計(jì)教程、經(jīng)驗(yàn)分享和各種意想不到的"福利"嗎？
添加 優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) 微信號(hào)：【youshege】?jī)?yōu)設(shè)哥的全拼
您也可以通過(guò)掃描下方二維碼快速添加：