我在上一篇文章《動效設計沒那么難！讓谷歌動效設計師帶你入門》當中，已經通過實際的案例，分享了動效設計并不難的原因。我們著力推動 Material Design ，我也希望設計師能夠更好地使用我所熟悉和喜愛的 Material 動效原理，來設計出更好的產品。為了更好地設計動效，我們團隊使用 Adobe After Effect 作為設計動效的主要工具。因此，在我今天的文章當中，我會分享我們自己的工作流程、技巧和設計的方法。

先下載我的 AE 文檔

下載我所準備的這個基本的 Sticker Sheet 文檔，你就能夠看到我是如何使用簡化后的工作流來完成項目的（下面是概述）。它包含一組 Material 組件，基準 UI 組件和導航轉場動畫。

戳這里下載?? 提取碼：cyw5

將素材導入到 AE

首先，我們需要制作動效的相關素材。我們團隊中絕大多數的視覺設計師都喜歡使用 Sketch 來設計 UI，而這款 UI 設計工具默認是不支持 AE 的。值得慶幸的是，Adam Plouff 制作了一款聯通兩款工具的插件，戳這里獲取。借助這款插件，我可以將我們的 Material 組件從 Sketch 導入到 AE 當中。這些素材，你可以在我之前所提供的 Sticker sheet 組件文件夾中找到。

創建 UI

有了庫中的這些基礎組件之后，你可以通過拖拽快速構建 UI ，并且將它們整合進新的 AE comp 當中去。

下面的案例就是將 Sketch UI組件直接拖拽到一個 AE comp 當中。

自定義組件

這些基準組件為你提供了良好的基礎，現在你可以拿它們來創建各種 UI。這是 AE 中主屬性（Master Properties）這一功能最令人側目的地方。這一經常被忽略的功能，其實可以快速創建出高度可復用的單個組件素材，創建好了之后就無需來回復制原始的素材了。它在功能上，非常接近 Sketch 中的符號（Symbols）的使用方式。舉個例子，APP 的底部菜單欄是最常見的UI組件，它經常會隨著 APP 的變化而出現圖標、色彩、陰影上的變化。考慮到這一點，我直接將這三個屬性添加為主屬性。

△ 使用主屬性快速調整組件的示例

通過向每個組件添加主屬性，我就能將 UI 界面快速地轉化為成組的動畫。同樣的，你也可以在 Baseline UIs 文件夾中找到這些素材。

使用主屬性自定義組件，來創建 UI 動效合集。

動畫轉場過渡

現在，我們已經建立了創建 UI 動畫的一個基本的工作流了，接下來我們就可以制作動畫效果了。在 Navigation Transitions（導航轉場過渡） 這個文件夾當中，有詳細的范例，演示了如何在 AE 中使用 Material Design 的運動模式。如果你對于這種運動模式感興趣，可以詳細閱讀一下前一篇文章《動效設計沒那么難！讓谷歌動效設計師帶你入門》。

△ 使用Material 運動模式所制作的導航轉場過渡效果

在剛剛開始的時候，所有的屬性都是沒有緩動動畫的。然后，父合成組通過時間重新映射和設置關鍵幀的持續時長來實現緩動的效果。這個時候可以非常輕松快速地調整緩動和持續時長，因為為了控制整個轉場過渡的效果，只需要映射兩次關鍵幀就夠了。而這也是將緩動曲線應用到所有元素的動畫當中的一種簡單的方法。這樣一來，所有的運動的元素都會具有相似一致的運動規律。離開界面的元素隨著加速曲線離開 UI 界面，而進入界面的元素則隨著曲線減緩而進入 UI 界面。你可以在「Complex choreography」（復雜的動畫編排）這一節當中閱讀更多的相關內容。

這種方法可以應用于幾乎所有符合 Material 運動規律的過渡動效，創造一致的視覺體驗。當然，這套方法是沒法處理更加復雜或者高度風格化的動畫效果和流程的，但是這種情況并不常見。

AE 是一個非常靈活的工具，因此我們也很難說某個動畫效果的制作流程是絕對正確的，但是目前來說，我們借助這套流程可以非常高效地制作動畫效果。每個設計師都有著獨特而高效的動畫制作方法，我希望我的方法能夠幫你成為一名效率更高的動效設計師。