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

• 原文地址：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、前端、後端、區塊鏈、產品、設計、人工智慧等領域，想要檢視更多優質譯文請持續關注 掘金翻譯計劃、官方微博、知乎專欄。