我想說說一些有關動畫制作的東西，包括視頻，demos，HTML或UI的高保真動效demo，軟件，建議等。
在開始說之前，我從回答這三個問題開始。
第一個問題：動畫在哪里展示？
有很多種情況下。為某個音頻制作樣片，或者將動效上傳到Dribbble，與交互的高保真動效demo，制作視頻教程，制作廣告等，都是不一樣的。
這里您要知道您的作品將在哪里展示，因為它決定著使用哪些軟件甚至和制作流程。一般都是在網絡，app，電視，視頻，特殊儀表板，廣告牌等展示。
第二：如何建立它？ 準備使用哪些軟件？
一旦您知道在哪兒展示，您就應該想想您將如何去做。其實您也可以在這之前就開始（ 問題三 ），這些都看你自己準備怎么去做。
例如，如果您正在制作一則電視的廣告，您可以使用Final Cut Pro，Adobe Premiere或Adobe After Effects。如果您正在為您的作品集做demos，或許您可以使用Flinto或Principle。如果您要做一則廣告，您可以選擇Google Web Designer， Adobe Animate CC或僅使用代碼。如果您要為一個網站做微互動系統(tǒng)，您最好使用CSS transitions。
這里不是為軟件打廣告也不是一定要用這些軟件。但是，如果您在做網頁動效設計，當一段交互的視頻或者動效沒有達到最理想效果的時候，一開始的時候其實您就應該與開發(fā)人員多多交流，看可以用什么方法來最好的解決。
第三：您的制作流程是什么？分為幾個階段？
這也是一個懸而未決的問題，所以要看你怎么想了。以我的情況來舉個例子，我的流程分為三個階段，起手稿，繪畫和動畫。筆和鉛筆對我來說非常重要，對我進行UX（用戶體檢設計）尤其重要。
示例：Ironhack UXUI課程樣片
這是一個演示學生參加Ironhack課程的demo。 它只需要放在網頁上展示。我在第一版中，軟件使用了Adobe AnimateCC。我認為我還可以用代碼（例如GSAP或類似的庫）和Principle來做，可以比較各個軟件做出來的結果有什么不同。我先用iPhone8建立了畫布。
手稿
我最開始先回想怎么動起來。關于動態(tài)效果，我首先想到，如何變化的？觀看整個動畫制作需要多長時間？它應該要像旋轉木馬一樣在轉動，從左到右，并顯示出不同的畫面。我在思考動畫的節(jié)奏，它應該一次顯示一個畫面出來。
其次我想的是畫面。舉例來說，一個動畫有10個畫面。在每個畫面中，我會展示一個角色和一些文字。我聯(lián)想到Ironhack Bootcamp上的一個描述我的小伙伴的動畫。是以這種方式來展示每個畫面的。
??一個角色
??一幅背景（可能是純色）
??一段描述性的文字
??或許角色有第二種狀態(tài)，所以它不是靜止的
如何制作每個畫面的動畫呢？可以這樣制作：先是角色出現(xiàn)，然后文字出現(xiàn)，還有一些動畫（我覺得這要有點搞笑），最后角色慢慢從右到左離場，這是一個角色的序列。
現(xiàn)在讓我們來好好想想每個的角色。我可以引入哪些元素來吸引用戶的注意力呢？我想到了用10個不同的角色和一個讓動畫更加好的元素，比如可以給角色帶上頭盔，改變發(fā)型，讓角色生氣等等。
繪圖/設計
這里我直接進到Sketch里，只是為了用來繪圖畫。因為我不是插畫家，所以我就使用Paul Stanley 的 Avataaars。我有10個角色和差不多20個畫板（包括初始狀態(tài)和最終狀態(tài)）。將它導出到 InvisionApp，出現(xiàn)的畫面如下所示：
然后我去制作模型并下載所需資源。
這樣做的原因是：我使用Adobe Animate CC 制作動畫，因為Sketch不是Adobe旗下的，所以我會去InvisionApp獲取資源（當然，也可以使用 Adobe Illustrator 制作角色），我的資源如下。
動畫
然后轉到 AdobeAnimateCC 并導入所有資源。 我打算使用 Canvas 制作一個簡單的時間軸，這可能不太簡單，因為我的動畫有950幀，差不多有40秒。我有一個背景和元素進出的圖層。用來調整動態(tài)效果，加不透明性以及轉換。
如您知道的，您可以將它導出到代碼中，這樣您就可以在這里看到動畫是如何制作的（Run Pen?。?/p>
如果你直接用 Adobe AnimateCC（CreateJS庫）過濾轉換，后果會很嚴重，因為一旦將其轉換為代碼后，它們就不能顯示出來。您可以將這個動畫與從同一文件導出的視頻進行比較，您就會發(fā)現(xiàn)不同之處。
視頻如下：
直接從Adobe AnimateCC導出的視頻
而且我還可以使用代碼或Principle做出同樣的效果。這樣可以讓背景栩栩如生。
不管怎么樣，可以讓您的角色哭泣，跳舞，喝咖啡，裝扮成印度人，用一個蘋果使人醍醐灌頂，讓您的頭發(fā)被一匹馬吃掉，把其中一個變成哈利波特等等動畫，這都很有工作。
同樣，也可以增加使用一些 flaticon 圖標，比如云，鳥，羽毛，茶杯，仙人掌，蘋果，頭盔，魔術棒，相機，馬，英國國旗和鉛筆。
