日常工作中，交互設計師不僅需要處理復雜的業務邏輯、排放各種層次的信息，還經常需要制作各類動效。除了用于可用性測試、方案匯報與演示之外，動效還承擔著豐富頁面效果、情感化表達等提升用戶體驗的作用。

按照目前的設計趨勢，動效都趨向于細微化，主張動效本身不喧賓奪主，而是潛移默化地影響用戶體驗。動效設計需要和場景緊密結合，炫酷的效果往往并不實用。另一方面，動效設計出來之后還要能順利被工程師所實現。很多優秀的效果在實現過程中由于設計師、工程師的專業語言不通，浪費了大量時間，并且還原度低下。所以，本文來聊一聊基礎的動效交付方法。

說在最前面，我們必須理解動效制作的一個基本特點：所有復雜效果都是各個簡單效果的組合。

首先，仔細觀察一下手上App里的效果：時間、位置、形狀（寬、高、圓角、比例大小）、透明度、顏色，基本上所有的效果都離不開這幾種屬性的組合變化，最多就是不同組件的屬性變化相互關聯。只要抓住這個特點，就能化繁為簡、化整為零。

比如，觀察一下微信里，在 List 中點擊某個對話進入具體聊天頁面時頂部 Tab 的變化：無非就是“返回按鈕”和“聊天詳情 icon”淡入，“中間微信文字”向左移動并淡出、“用戶名”向左移動并淡入。

所謂的淡入淡出，就是組件（可能是文字、icon、頁面）的透明度在變化，移動則不用多說，是組件的x、y坐標在改變。這里引入技術實現過程中需要關注的第一個關鍵點：

屬性變化的起點和終點——Begain&End Value

具體來說，可能是x坐標從0px到200px，或者透明度 Opacity 從0%變到100%。記住，代碼實現時也必須明確這些值的變化，這定義了整個效果的起終點狀態。

有了起點值和終點值，還需要關注的第二個關鍵點是：

屬性變化的過程——時間和曲線

嚴格來說，曲線是歸一化后的時間與屬性值的對應關系。說人話就是，這個屬性從起點到終點，總共花費了一個單位的時間（可能是一秒、或十秒），那么每一個瞬間這個屬性值是多少，都應該被定義清楚。

最簡單的線性曲線，即屬性值變化與時間成正比；最常用的 Ease Both 曲線，即屬性變化先加速后減速，保持起點和終點附近變化比較平緩；比較復雜的 Spring 曲線，模擬了彈簧的震動和阻尼效果。

在開發過程中，幾類曲線都有對應的動畫函數可以調用：以 iOS 為例，如果使用的是默認 Core Animation 引擎，會有 EaseOutEaseIn 函數——其本質為貝塞爾函數曲線，因此通過調整函數下的四個參數，可以得到我們想要的曲線形狀。而如果需要 Spring 等相對復雜的效果，則可以使用 Pop Animation 等第三方動畫引擎，它們對默認動畫有更好的封裝。

記得告訴開發同學你所使用的動畫曲線是哪一種（確定參數和總體動畫時間）。這里推薦一個網站：http://cubic-bezier.com，可以快速調整好曲線參數并查看效果。

就像前面所說，所有的動畫都是簡單效果的組合，因此我們還需要描述這種組合的方式，也就是第三個關鍵點：

描述不同屬性變化的組合形式——先后順序和相互關系

以 Principle（一個比較簡單易用的動效軟件）的動效產出為例：

很簡單，你要說明的就是，什么組件（如 pic 是一張圖片），什么屬性（xy 坐標、Scale），在什么時間（0－300ms），以什么過程（Default 曲線）做了什么變化（起點和終點值）。然后，如圖所示，列舉清楚整個動畫過程中，各個組件屬性變化的先后關系。

差點忘了，我們還必須要告訴開發同學，是什么事件開啟了整個動畫過程，也就是最后第四個關鍵點：

描述觸發動效的手勢操作——點擊(Tap)、輕掃(Swipe)、長按(Long Press)等

好了，有了以上四個關鍵點，拋開動效本身制作的技術含量不談，絕大部分基礎動效應該都可以描述得非常清晰了。其中曲線部分是一個難點，也是很多設計師所描述不清楚的，推薦閱讀 Material Design Motion 一章中的 Duration and easing 一節（自帶梯子 https://www.google.com/design/spec/motion/material-motion.html#），不僅給出了諸多動畫樣例，甚至還給出了幾大平臺的動畫函數和參數設置，非常值得學習。

最后再復習一下四個動效交付關鍵點：

第一、屬性變化的起點和終點——Begain Value 和 End Value；

第二、屬性變化的過程——時間和曲線；

第三、描述不同屬性變化的組合形式——先后順序和相互關系；

第四、描述觸發動效的手勢操作——Tap、Long Press、Swipe and so on.

作者鎮雷同學是阿里巴巴的交互設計師，文筆簡潔流暢。作為一個非科班的交互設計師，他對自學方法鉆研得比較透徹，寫過不少實戰性的好文章：

1. 這篇是自學的總路徑：《零基礎入門！給非科班生的自學路徑圖之交互設計篇》
2. 學完了如何面試？《畢業季專題第二期！揭秘天貓交互設計師面試過程》
3. 交互設計師速成篇：《速成技巧篇！一個月內如何學習才能應聘交互設計實習生？》

歡迎關注作者的微信公眾號：

【優設網 原創文章 投稿郵箱：2650232288@qq.com】

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