[譯] 開始設計動畫的九個步驟：爲做品賦予生命力

• 原文地址：Get started with motion design in 9 steps: Start breathing life into your creations
• 原文做者：Arpit Agarwal
• 譯文出自：掘金翻譯計劃
• 本文永久連接：github.com/xitu/gold-m…
• 譯者：reid3290
• 校對者：Starriers，Xekin-FE

動畫創造生命

動畫意味着充沛的活力與激情，它給靜止的事物以生命。在軟件應用中，動畫不只是爲了取悅人們，而更是爲了解決問題。

做爲人類，咱們習慣於世界圍繞着咱們運轉；若是軟件的每一部分也都能有着連貫的動畫，那就會讓人感到天然而又充滿活力。

科技行業領導者不斷推進其產品朝着更爲天然的方向發展，諸如動畫設計、動畫用戶體驗、用戶體驗編排等複雜的概念日趨流行。

請記住：動畫就像佈局、間距、排印和顏色同樣，能在潛意識中構建你應用軟件的個性。

不知你是否留意過，當在 iPhone 中將某個東西滑動到最頂端或最底端時，它就會出現一種回彈效果。這些細節看似微不足道，卻在構建蘋果產品的個性上發揮了舉足輕重的做用。

酷，讓咱們開始使用動畫吧

1. 開始觀察

學會關注動畫：若是你不可以覺察到事物的移動，也就沒法創造出動畫。在使用你最喜好的應用程序時，觀察屏幕上的東西是如何移動的；反覆觀察，注意細節，找出它令你喜歡的緣由。留意全部發生變化的元素——形狀、尺寸、位置、顏色等等。不管變化是小是大，努力找出動畫在整個構圖中所起到的做用。

2. 動畫不只是一層顏色

動畫揭示了一種更深層的意義：做爲一名創造者，你必須從一開始就有意識地將動畫考慮在內。在設計階段，爲原型添加動畫使其具備時間上的維度；在開發階段，將代碼模塊化從而更簡便地實現 UI 中的動畫。【有關模塊化參見】(https://medium.com/@acyoo/architecting-ios-development-at-zomato-cf894a7fa5e3)

提示：謹慎思考產品的動畫特色，這將爲產品賦予一種角色，而且可以幫助你從更深的層面上理解你所想要構建的東西。

3. 在何處引入動畫？

可是要在哪裏引入動畫呢？

簡單的例子有，當屏幕正在變化時、當用戶正在與界面元素交互時或者當用戶不得不等待時。

4. 動畫分類

你能夠將產品中的動畫分爲三類：切換（內容變化/頁面切換）、微觀互動（例如推特的點贊按鈕）、圖形動畫（例如 Zomato 的購物 App 的啓動界面上跳躍的小摩托車）。

動畫分類

5. 用動畫提供空間信息

動畫可以傳達空間信息

若是某個 UI 元素從屏幕的右側進入，用戶心理上會將那個元素的放在右邊。例如，若是一個漢堡菜單按鈕處於屏幕的左上角，那麼該菜單的入場動畫就必定要從屏幕左側開始。將動畫展現給他人觀看並聽取他們的意見，從而肯定動畫所傳達的空間信息是否準確。這是避免困惑的最簡單方法。

6. 開始理解像持續時間、時間曲線、動畫路徑、初值和終值等概念的含義

這些參數從技術層面上構成了動畫。使用這些參數並熟練掌控它們，一旦你可以控制這些參數，你就可以創造出傑出的動畫做品。在 UI 方面，谷歌提供了一些很好的指導資料。

學習動畫參數——這兩個箱子的動畫除了時間曲線以外其它參數所有同樣，請探究其中奧妙

7. 毫不能讓用戶在某個流程的中間等待

毫不能爲了等待動畫完成而在某個流程中間故意放慢速度。若是必需要用戶等待，那就用一些有意義的動畫來達到娛樂的效果。請記住，在任何什麼時候動畫都是用來解決問題的。加載動畫的存在是有其合理性的。此外，不要在軟件中濫用動畫，軟件不是電影！

專家提示：保持動畫的微妙性並使之與產品故事線相吻合能帶來愉悅的用戶體驗。

8. 相關工具

Lottie，Adobe Animate CC，After Effects，Sketch2AE，Framer，Origami，Animatic App，UIDynamics(iOS) 等工具均可以用來作動畫設計，不妨一試。

我會建議使用紙和筆來完成構思，以後再使用其餘數字化軟件。好比在這篇文章中的動畫中，我就是先用 Animatic App 畫的草圖。一份無缺的草稿會使後續的工做顯得簡單而明確。

從筆和紙開始

9. 捕捉並保存你以爲有趣的動畫

保存你以爲有趣的動畫。放慢速度，反覆觀察，理解元素的運動機制。經過模仿來進行學習。個人 Mac 裏存滿了我以爲有趣的 GIF。你也能夠在 dribbble 上保存 GIF。另外，Giphy Capture 是在 Mac 屏幕上捕捉和記錄動畫的優秀工具。

無所畏懼

💥 額外福利——對恐懼說再見

還畏懼開始嗎？坐下，放鬆，吃些甜點，放首音樂。關上手機，將紙筆放在身旁。或許能夠小憩一會，儘可能讓本身感到溫馨自在。取白紙一張，拿起筆來，隨意塗寫。再取一張白紙，繼續塗寫着，線條、形狀、故事。放空本身，感覺筆尖的移動。開始，一切只須要開始，看它帶你去向何方。

比畫畫更難的是開始動筆。一旦你開始在白紙上動筆，不管你畫出了什麼，你便具備了創造力。

---

感謝閱讀！

請欣賞一些個人動畫做品——

• 個人動畫牆：我作的一些 GIF 及其相關故事。medium.com

---

掘金翻譯計劃 是一個翻譯優質互聯網技術文章的社區，文章來源爲 掘金 上的英文分享文章。內容覆蓋 Android、iOS、前端、後端、區塊鏈、產品、設計、人工智能等領域，想要查看更多優質譯文請持續關注 掘金翻譯計劃、官方微博、知乎專欄。