作為設(shè)計(jì)師，我們經(jīng)常接到這樣的需求：XX app中的動(dòng)效好酷啊，我們也做一個(gè)吧。這時(shí)，一些習(xí)慣了把設(shè)計(jì)輸出 = PSD的同學(xué)往往無(wú)從下手。那什么是動(dòng)效設(shè)計(jì)？什么時(shí)候需要用什么樣的動(dòng)效？動(dòng)效越酷炫越好嗎？這里，我會(huì)用幾篇文章分別回答這些問(wèn)題。首先，我們先了解動(dòng)效設(shè)計(jì)中如何用運(yùn)動(dòng)曲線表達(dá)動(dòng)效以及緩動(dòng)設(shè)計(jì)。
為什么要?jiǎng)有В?/h3>
動(dòng)效是元素的位移、姿態(tài)、大小和可見度等隨時(shí)間的變化。這里我們以位移為例來(lái)學(xué)習(xí)下動(dòng)效。為什么需要?jiǎng)有?？比如這里，我希望讓方塊到右邊的位置上，如果沒(méi)有動(dòng)效，我可以把它“傳送”過(guò)去，就像這樣：
顯然，這樣的技術(shù)在現(xiàn)實(shí)生活中是不存在的（也許有一天能實(shí)現(xiàn)），所以看起來(lái)會(huì)很不自然。這就需要有一個(gè)運(yùn)動(dòng)的過(guò)程，動(dòng)效設(shè)計(jì)就是在設(shè)計(jì)這個(gè)過(guò)程：
這樣就好多了。但這樣的動(dòng)效該如何表達(dá)呢？做過(guò)開發(fā)的同學(xué)都知道，可以用公式，絕大部分的動(dòng)效用牛頓運(yùn)動(dòng)方程都是可以表達(dá)的。當(dāng)然運(yùn)動(dòng)方程也可以做成圖表，這里我們就用圖表的方式來(lái)表達(dá)運(yùn)動(dòng)，這就是運(yùn)動(dòng)曲線。最常用的曲線是“位移 – 時(shí)間”曲線：橫軸表示時(shí)間，縱軸表示在一個(gè)方向上的位移。（出于簡(jiǎn)化考慮，這里我們只考慮在一個(gè)維度上的運(yùn)動(dòng)，在三維空間中的運(yùn)動(dòng)可以分解成單個(gè)維度）。 我們先看最簡(jiǎn)單的運(yùn)動(dòng)，勻速直線運(yùn)動(dòng)：
它的運(yùn)動(dòng)曲線其實(shí)就是條直線，線的斜率（目標(biāo)位置 / 運(yùn)動(dòng)時(shí)間）就是它的運(yùn)動(dòng)速度：
在現(xiàn)實(shí)生活中，如果物體在傳送帶上，我們就可以看成是勻速直線運(yùn)動(dòng)：
不過(guò)這樣的例子并不多，物體很少會(huì)自己突然獲得速度，運(yùn)動(dòng)一段距離后又突然停止。在靜止和運(yùn)動(dòng)兩種狀態(tài)之間，物體的速度往往會(huì)發(fā)生變化。這就是緩動(dòng)（Easing）。
緩動(dòng)－減速運(yùn)動(dòng)（Ease out）
在緩動(dòng)過(guò)程中，物體的運(yùn)動(dòng)速度會(huì)由于外力而發(fā)生變化。常見的緩動(dòng)有三種：減速運(yùn)動(dòng)、加速運(yùn)動(dòng)、先加速后減速。我們先看減速運(yùn)動(dòng)：
減速運(yùn)動(dòng)的曲線是：
我們發(fā)現(xiàn)，物體有一個(gè)初始速度，隨著時(shí)間的推移，它的速度，也就是曲線的斜率在由大變小到0。什么樣的物體會(huì)這樣運(yùn)動(dòng)呢？比如這樣：
緩動(dòng)－加速運(yùn)動(dòng)（Ease in）
加速運(yùn)動(dòng)和減速運(yùn)動(dòng)的速度變化相反：
曲線也是對(duì)稱的：
加速運(yùn)動(dòng)可以看作這樣：
在界面設(shè)計(jì)中，減速和加速動(dòng)效往往是成對(duì)使用的。通常元素飛入時(shí)用減速運(yùn)動(dòng)，飛出時(shí)用加速運(yùn)動(dòng)。例如iPhone App Store中的分類列表：
緩動(dòng)－先加速后減速（Ease In and Out）
可能大部分物體是這樣運(yùn)動(dòng)的：
從曲線中，我們看到，物體的速度（曲線的斜率）由0開始增加，在中點(diǎn)達(dá)到最大值，然后又減小到0：
我們可以看成這個(gè)物體在依靠自己的動(dòng)力運(yùn)動(dòng)：
很多起點(diǎn)和終點(diǎn)都在界面內(nèi)的運(yùn)動(dòng)都使用這種緩動(dòng)形式，比如iOS天氣App的城市切換動(dòng)畫：
緩動(dòng)的組合
將上面三種最基本的緩動(dòng)形式組合，可以表現(xiàn)出更多的運(yùn)動(dòng)形式，例如：
這就像用一個(gè)彈弓把物體彈射出去：
它運(yùn)動(dòng)曲線分為兩段，物體先向反方向運(yùn)動(dòng)，再在正向以很高的速度開始減速運(yùn)動(dòng)：
采用不同的緩動(dòng)形式不僅能幫助用戶建立方向感，還能表現(xiàn)出物體的材質(zhì)和“性格”，比如iOS的鎖屏界面落下時(shí)：
這體現(xiàn)出鎖屏界面本身是一種彈性材質(zhì)，而下方的相機(jī)是堅(jiān)硬的材質(zhì)。它會(huì)讓用戶感覺(jué)到鎖屏很“輕盈”、易使用。如果我們希望下落的物體感覺(jué)起來(lái)很重，就可以這樣：
或者是個(gè)很高科技的方塊：
或者是個(gè)UFO？
如果是個(gè)給小朋友用的app，也可以很有趣：
感興趣的同學(xué)可以畫下上面這些動(dòng)效的運(yùn)動(dòng)曲線。
小結(jié)
在本文中，我們討論了動(dòng)效設(shè)計(jì)的概念、緩動(dòng)曲線的解讀和幾種常見的緩動(dòng)類型，也看了一些復(fù)雜的緩動(dòng)案例。在下一篇文章中我們會(huì)討論這些動(dòng)畫的適用場(chǎng)景和用途。
注：部分圖片來(lái)自 Apple iOS 7 Tech Talks 2013 – User Interface Design for iOS 7 Apps.
VIA: http://ued.qq.com/2015/07/28/dynamicefficiencydesign1/
