本文的作者列舉了自己在挑戰過程中大量的案例和設計思路，非常詳細的介紹了她是如何完成這項挑戰的，相信讀完，你定會有不少收穫。

100天動畫設計

100 Days of Motion Design

本文將介紹我是如何在100天內通過自學創造50個動畫的。

在西雅圖的一個夏夜，我吃著冰淇淋，在Youtube上看到一個關於Principle的教程並下載了一個免費試用版來嘗試。幾個月後，完成了我的第五個100天挑戰——100天動畫設計

我是從2015年開始第一次嘗試100天挑戰的，我之前的挑戰項目包括《100天塗鴉》、《100天字體練習》、《100天水彩畫》、《100天矢量插圖》。

我過去做的100天挑戰項目

對於我來說，100天項目是一個宣洩創意的地方，它能讓我通過藝術來表達自我，創作的樂趣和學習新技巧的挑戰總是會讓我收穫頗豐。

在100天動畫設計挑戰中，我自學了動效設計，同時也在100天內創作了50個矢量動畫。你可以在我的Instagram和 Dribbble上找到他們。

接下來，我將會把我的創作工具，創作過程以及項目反思分享給大家。

一、工具

Sketch + Principle

在最開始的兩週，我會在sketch中繪製插畫然後導入到Principle中做動畫。

• Sketch:是一款輕量級的矢量編輯工具，操作簡單，價格也不貴。我發現它非常適合畫一些簡單插畫
• Principle
  :是一款輕量級的原型製作工具，能生成交互動畫，它與Sketch能無縫協作。我發現它是初學者學習動畫屬性和時間軸概念的好工具。
  

Illustrator + After Effects

在最初的兩週後，我換了能控制更多細節的Illustrator 和After Effects的工具。

• Illustrator: 最強大的矢量編輯工具，用 Illustrator創作的矢量插畫能與After Effects 無縫對接。

• After Effects: 最強大的動效軟件，學習成本也相對較高。通過這個項目，我也掌握了許多使用它的高階控制和內置視覺效果。

二、創作過程

創作動畫比較費時，所以我將創作過程分為4個步驟並用2天時間來完成。

第一步：尋找靈感（15分鐘）

我每天都會在Dribbble,Behance,Instagram上收集動畫靈感，不斷豐富的Pinterest畫板（https://www.pinterest.com/tiantianxu/ui-motion/）正成為我的靈感源泉。

我同樣也會在Youtube上收集很多動效教程。（https://www.youtube.com/playlist?list=PL2qWmlVFdcGNrUdd-agegZo-7GFBmgKOu）這是我在100天動效挑戰中收集到的一些教程清單。

第二步：畫草圖（5分鐘）

一旦我有了想法，我就會在我的筆記本上畫出一些關鍵畫面。

想法草圖

第三步：創作矢量插圖（40分鐘）

我創作完矢量圖後會把文件導入到Principle或After Effects中，良好的文件組織結構會大大加速動畫的設計過程。

這個教程（https://www.youtube.com/watch?v=yPha_s7W-0M&feature=youtu.be）會教你如何準備並導入一個Illustrator 文件到After Effects中。另外，可以通過Sketch2AE(https://google.github.io/sketch2ae/)把Sketch文件導入到AE中。

第四步：創作動畫（60分鐘）

接著我會讓矢量插圖動起來，並導出一個動畫短視頻，然後把這個短視頻帶上#100daysofmotionbytx這個標籤發到Instagram上。

這個教程(https://youtu.be/jHpk1JS44yE)將教你如何把一個視頻導出成一個能發到Dribbble的GIF圖片。

第一天到第十四天：從基礎動畫開始

我的第一個動畫是跟著這個教程來做的：

Principle—簡單的角色動畫(跳動的甜甜圈）

(https://youtu.be/qYCPoqwmQK4)

100天動畫—跳動的甜甜圈

通過這個教程 Principle — 手勢動畫(https://youtu.be/iS3B5VT7Ejc)，我創作了這個交互原型動畫

100天動畫 —傑克和披薩

很快，我有能力在不看教程的情況下獨立完成動畫的創作。

100天動畫—白天和黑夜切換

100天動畫—日食

第15-70天：進階學習

在第15-70天期間，我嘗試了以下一些方法來學習AE。

方法1:看教程並根據回憶來創作

我用1.5倍的速度來看教程並根據回憶創作動畫。

在我覺得需要的時候，我會記下一些關鍵步驟，只有當我徹底卡住的時候，我才會倒回來再看看教程。我也會努力的去記一些AE的快捷鍵以幫助我更加高效的創作動畫。

我看了這個煙霧AE教程

(https://youtu.be/mYf1wElfPn4)創作了下面這個動畫

100天動畫—Epicurrence

我看了這個熔岩燈AE教程

(https://youtu.be/iC3mLtDVjlc)創作了下面的動畫

100天動畫—熔岩燈

方法2：借鑑別人的設計

我在Dribbble上通過對別人作品一幀一幀的拆解來學習，然後根據自己的想法再創造。

我再創作了Deekay的彈力水果

(https://dribbble.com/shots/2542570-Bouncy-Fruits) 。我通常拆解他的作品，學習到了“擠壓變形”的動畫原理。

100天動畫 — 彈力甜點

我再創作了 Tony Babel的行走動畫(https://dribbble.com/shots/3631324-Walk-Cycle-Tutorial) 。他的行走動畫教程教會了我如何讓一個動畫循環行走(https://youtu.be/PgBo-00_GWc) 。(這個人物的靈感是受到 Skinny Andy(https://www.flickr.com/photos/skinnyandy/)的插畫啟發。)

100天動畫 — 茶杯先生

方法3：刻意的去用學到的技能來做創作

重複是強化學習新技能的關鍵，我會比較刻意的去使用我學到的技能來創作新的動畫。

我創作了一個彈性南瓜就是利用學到的“擠壓變形”動畫原理。

100 天動畫—南瓜

我將從Tony那裡學到的循環行走動畫再次應用到一隻火烈鳥的動畫中去。

100天動畫—火烈鳥

方法4：通過閱讀書籍將這些點連成面

在100天挑戰的中期，我花了一天時間去讀了《Adobe After Effects CC Classroom in a Book》

（書的鏈接：http://suo.im/4SxObb）。

通過書籍能更加系統的學習技能，我能將那些零散的點串聯起來，同時，我還發現了一些我不知道的新技術。

第71-100天: 創造自己心中的動畫

當我已經可以很熟練的掌握這些軟件的時候，便開始創作一些更加隨心的動畫。

100天動畫—瞭望塔

(靈感來自於遊戲《 看火人》(http://www.firewatchgame.com/))

100天動畫—烏鴉人 (靈感來自於《紀念碑谷》)

100天動畫—魔法玫瑰 (靈感來自於電影《美女與野獸》)

一些靈感來自於其他人的插畫

100天動畫—燈塔 (借鑑於 Paulius’ Lighthouse)

100天動畫—水下世界 (借鑑於 Dave Chenell’s Whale Migration)

下面是我提交的一個設計挑戰作品，它讓我自己走出了舒適區並同時學到了新的技術。

100天動畫—旋轉木馬

我創作了一幅藝術作品來推廣“西雅圖週四字體設計趴”活動——這個活動是每月一次，主要以字體設計為主的設計聚會。

100天動畫—霓虹燈

我為我去過的和我想去的地方也設計了動畫

100天動畫—熱氣球

100天動畫—極光

100天動畫 — 孔明燈

100天動畫 —森林 (借鑑於 Mikael Gustafsson’s Birds)

在100天的項目快結束時，我從我100天水彩的挑戰中汲取了靈感創作了這個“銀河女孩”動畫

100 天動畫—銀河女孩

思考

1. 想法驅動

一旦我有了一個想法，我就想把它實現出來，無論它需要學習什麼樣的技術。

比如，我想表達我對閱讀的熱愛。為了實現我構想的翻書動畫，我就會去Youtube上找翻書動畫的教程

（https://www.youtube.com/watch?v=yTOEM8bKx_Y&feature=youtu.be）

並同時學會了如何建立3D圖層去做一個2D的項目。

100天動畫—翻書

同樣的，我想做一杯南瓜香料拿鐵。但是我不會，我就去Youtube上找了一個2D煙霧教程，學習瞭如何使用滑塊控制和擺動表達式。

100天動畫—南瓜香料拿鐵

這種以創意為導向的方法讓我充滿動力，並促使我發現並掌握到新的技術。

2. 保持謙卑

在項目開始的時候，我對自己的動畫設計能力很有信心。但當我開始探索AE的時候，我的自信心迅速崩塌——巨大的技能差距讓我意識到我在動效設計方面的知識和技能是多麼的侷限。

達克效應描述了一種認知偏差，即能力低下的人會具有虛幻的優越感，錯誤地認為自己的能力比實際更強。

達克效應影響

我越來越意識到自己的侷限，就愈加謙卑。

為了提高自己的技能，我需要時刻保持謙卑，不管我認為我已經知道了多少

3. 成為 1%

在我開始100天項目之前，我把大量的時間浪費在社交媒體和電影電視上，有時我也會花一些時間在網絡課程或者閱讀一本書上。但是所有這些事情都只是在輸入。

在互聯網文化中，有一個“1%定律”描述了互聯網社區的參與率：只有1%的人在這個社區積極的創建新的內容，9%的人會去編輯內容，而其他90%的人都只是在消費這些內容。

1% 定律 (互聯網文化)

從我開始100天的項目後，我也成為了一個內容生產者。我開始創造一些我喜歡的東西，學習一些新技術，並以積極的方式影響我周圍的人。

我想成為創造內容的那1%的人——這種想法激勵我每天都在行動，尤其是在遇到困難想要鬆懈的時候

結語

回頭看看，我非常感謝那些製作了教程並在Youtube上免費分享的人。同時，我也被那些不斷創造出大量優秀作品的人深深的激勵著。

下面是在項目挑戰中一直激勵著我的10位內容創作者們：

• Pablo Stanley(https://twitter.com/pablostanley)

• Gal Shir(https://dribbble.com/galshir)

• Tony Babel(https://dribbble.com/TonyBabel)

• James Curran(https://dribbble.com/slimjimstudios)

• Eran Mendel(https://dribbble.com/eranmendel)

• Hanna Jung(https://dribbble.com/Jung_Hanna)

• Yup Nguyen(https://dribbble.com/yupnguyen)

• Mikael Gustafsson(https://dribbble.com/MikaelGustafsson)

• Dave Chenell(https://dribbble.com/dchen)

• Beeple (Mike Winkelmann)(https://www.instagram.com/beeple_crap/)

注：文章中的很多教程鏈接可能都是英文的，不過現在翻譯工具這麼強大了，語言問題是難不住真正愛學習的你們的，加油吧！

優秀的人都這麼努力了，你還有什麼理由不去努力！！！

作者簡介：許田恬，清華大學畢業，密歇根大學人機交互碩士，現任Uber高級產品設計師，曾任職於亞馬遜，負責設計Kindle閱讀體驗項目。工作之餘做過的100天項目有《100天塗鴉》、《100天字體練習》、《100天水彩畫》、《100天矢量插圖》和《100天動效設計》。

Medium : https://uxdesign.cc/@tiantianxu

Instagram ：https://www.instagram.com/tiantianxu/

Dribbble ：https://dribbble.com/tiantianxu

文章鏈接：

https://mp.weixin.qq.com/s/bbaV3oqxNL-QDYlsJdxQOw

翻譯：彩雲sky

https://uxdesign.cc/100-days-of-motion-design-463526af852f

開始交互設計(IxD)的10個步驟

2020最Cool的城市LOGO，快來找找你的家鄉！

懂AR的設計師才是下一個趨勢的王者？

實用！UI設計中的10條經驗法則

日本小哥攢一年指甲，給女友做成求婚鑽戒：直男的浪漫，原諒我不懂···

醫護夫妻的聊天記錄曝光！看哭了···

要這樣活著，才不負此生 | 350萬人為之動容

閱讀更多 IXDC 的文章

關鍵字: 設計 動畫設計 Illustrator