Heyu：作為設(shè)計師，我們經(jīng)常接到這樣的需求：XX App中的動效好酷啊，我們也做一個吧。這時，一些習慣了把設(shè)計輸出 = PSD的同學往往無從下手。那什么是動效設(shè)計？什么時候需要用什么樣的動效？動效越酷炫越好嗎？這里，我會用幾篇文章分別回答這些問題。首先，我們先了解動效設(shè)計中如何用運動曲線表達動效以及緩動設(shè)計。

為什么要動效？

動效是元素的位移、姿態(tài)、大小和可見度等隨時間的變化。這里我們以位移為例來學習下動效。為什么需要動效呢？比如這里，我希望讓方塊到右邊的位置上，如果沒有動效，我可以把它“傳送”過去，就像這樣：

顯然，這樣的技術(shù)在現(xiàn)實生活中是不存在的（也許有一天能實現(xiàn)），所以看起來會很不自然。這就需要有一個運動的過程，動效設(shè)計就是在設(shè)計這個過程：

這樣就好多了。但這樣的動效該如何表達呢？做過開發(fā)的同學都知道，可以用公式，絕大部分的動效用牛頓運動方程都是可以表達的。當然運動方程也可以做成圖表，這里我們就用圖表的方式來表達運動，這就是運動曲線。最常用的曲線是“位移 – 時間”曲線：橫軸表示時間，縱軸表示在一個方向上的位移。（出于簡化考慮，這里我們只考慮在一個維度上的運動，在三維空間中的運動可以分解成單個維度）。 我們先看最簡單的運動，勻速直線運動：

它的運動曲線其實就是條直線，線的斜率（目標位置 / 運動時間）就是它的運動速度：

在現(xiàn)實生活中，如果物體在傳送帶上，我們就可以看成是勻速直線運動：

不過這樣的例子并不多，物體很少會自己突然獲得速度，運動一段距離后又突然停止。在靜止和運動兩種狀態(tài)之間，物體的速度往往會發(fā)生變化。這就是緩動（Easing）。

緩動－減速運動（Ease out）

在緩動過程中，物體的運動速度會由于外力而發(fā)生變化。常見的緩動有三種：減速運動、加速運動、先加速后減速。我們先看減速運動：

減速運動的曲線是：

我們發(fā)現(xiàn)，物體有一個初始速度，隨著時間的推移，它的速度，也就是曲線的斜率在由大變小到0。什么樣的物體會這樣運動呢？比如這樣：

緩動－加速運動（Ease in）

加速運動和減速運動的速度變化相反：

曲線也是對稱的：

加速運動可以看作這樣：

在界面設(shè)計中，減速和加速動效往往是成對使用的。通常元素飛入時用減速運動，飛出時用加速運動。例如iPhone App Store中的分類列表：

緩動－先加速后減速（Ease In and Out）

可能大部分物體是這樣運動的：

從曲線中，我們看到，物體的速度（曲線的斜率）由0開始增加，在中點達到最大值，然后又減小到0：

我們可以看成這個物體在依靠自己的動力運動：

很多起點和終點都在界面內(nèi)的運動都使用這種緩動形式，比如iOS天氣App的城市切換動畫：

緩動的組合

將上面三種最基本的緩動形式組合，可以表現(xiàn)出更多的運動形式，例如：

這就像用一個彈弓把物體彈射出去：

它運動曲線分為兩段，物體先向反方向運動，再在正向以很高的速度開始減速運動：

采用不同的緩動形式不僅能幫助用戶建立方向感，還能表現(xiàn)出物體的材質(zhì)和“性格”，比如iOS的鎖屏界面落下時：

這體現(xiàn)出鎖屏界面本身是一種彈性材質(zhì)，而下方的相機是堅硬的材質(zhì)。它會讓用戶感覺到鎖屏很“輕盈”、易使用。如果我們希望下落的物體感覺起來很重，就可以這樣：

或者是個很高科技的方塊：

或者是個UFO？

如果是個給小朋友用的app，也可以很有趣：

感興趣的同學可以畫下上面這些動效的運動曲線。

小結(jié)

在本文中，我們討論了動效設(shè)計的概念、緩動曲線的解讀和幾種常見的緩動類型，也看了一些復雜的緩動案例。在下一篇文章中我們會討論這些動畫的適用場景和用途。

【動效設(shè)計好文】

告訴你為什么要做動效設(shè)計：
《設(shè)計師的經(jīng)驗總結(jié)！我們?yōu)槭裁葱枰獎有гO(shè)計？》

改善動效實戰(zhàn)：
《點睛還是敗筆？手把手教你改善界面交互動畫（附案例）》

Windows用戶動效設(shè)計工具：
《WINDOW黨福利！這才是適合設(shè)計師的免費動效神器PIXATE》

原文地址：ued.qq

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

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國內(nèi)人氣最高的網(wǎng)頁設(shè)計師學習平臺，專注分享網(wǎng)頁設(shè)計、無線端設(shè)計以及PS教程。
【特色推薦】
設(shè)計師需要讀的100本書：史上最全的設(shè)計師圖書導航：http://hao.uisdc.com/book/。
設(shè)計微博：擁有粉絲量130萬的人氣微博@優(yōu)秀網(wǎng)頁設(shè)計 ，歡迎關(guān)注獲取網(wǎng)頁設(shè)計資源、下載頂尖設(shè)計素材。
設(shè)計導航：全球頂尖設(shè)計網(wǎng)站推薦，設(shè)計師必備導航：http://hao.uisdc.com