1.4 UI動效制作的工具介紹

由于篇幅所限，這里只就目前行業比較常用的動畫軟件做一個簡單的介紹。

1.4.1 二維/原型類動畫工具

1. Animate CC

Animate CC由原Adobe Flash Professional CC更名得來，它的前身便是為人熟知的Flash。2015年12月2日，Adobe宣布Flash Professional更名為Animate CC，同時在支持Flash SWF文件的基礎上，加入了對HTML5的支持。2016年1月，針對Animate CC發布的新版本正式更名為Adobe Animate CC，縮寫為An，如圖1-28所示。

主要用途：制作多媒體動畫。

優勢：Adobe系常用產品，有一定的用戶基礎，新的版本能較好地兼容HTML5等網頁格式。

劣勢：除非具有較好的ActionScrip編寫能力，一般情況下能實現的視覺效果只能以二維平面基礎類型的為主。一直以來，我個人總覺得用它來做動效或者原型動畫有點“殺雞焉用牛刀”的感覺，如果想做一些比較復雜的動畫效果，且設計師自身對軟件掌握得較好，可以嘗試一下。

2. Flinto

Flinto for Mac（暫無Windows版本）是一款輕量、高效的綜合性交互原型設計工具，可以使用它創建任何原型。從最簡單的頁面跳轉到令人印象深刻的精美轉場動效，無須任何代碼，也沒有復雜的時間軸，Flinto的可操作性幾乎是所有原型工具中最為簡單和快捷的，如圖1-29所示。

主要用途：制作動態可交互原型。

優勢：體量小，并且安裝好專門的Sketch插件之后，可實現與Sketch的無縫結合；iPhone端有專門的App可供下載，且支持手機實時預覽原型方案，同時可以在手機上執行交互演示。

劣勢：僅限于Mac設備使用；不可實現相對復雜的交互效果；對于其他設計領域的實際運用支持度不高。

3. Principle

Principle是一款小巧輕便的交互制作軟件，在界面樣式上和Sketch相似，比較容易上手。由于其可以直接導入Sketch當前的畫布內容，因此配合Sketch使用會非常方便，如圖1-30所示。

主要用途：制作動態可交互原型。

優勢：容易上手，并且和Sketch的整合度較高，支持App下載效果預覽。

劣勢：僅限于Mac設備；不可實現相對復雜的交互效果制作。

4. Tumult Hype

Tumult Hype是一款HTML5動畫開發工具，可以創建豐富的網頁交互動畫，支持層、時間軸等編輯方式，并支持導出HTML5、CSS3、JavaScript等網頁格式文件，在ios或Android平臺上表現流暢，如圖1-31所示。其特點是可以在網頁上做出悅目的動畫效果，且配備有中文版，但是對于復雜效果制作與演練的支持度較低，畢竟只是針對HTML的一個非常好用的動畫工具。

主要用途：制作動態可交互原型。

優勢：使用者無須編程基礎也可以做動效；對于網頁和HTML5的支持度比較好，可直接生成HTML5格式的文件。

劣勢：只支持Mac設備使用，沒有整合性較好的軟件和工具協同體系。所以協同起來會有些麻煩，圖層的導入能力不如上述兩個工具。Hype3自己的圖形繪畫形狀很少，只有3個形狀，而且不能對曲線進行編輯（這個還是比較麻煩的），而且不直接支持Sketch或者Photoshop使用，只能從別的軟件中導出圖片之后手動導入才行。

1.4.2 3D類動畫工具

我是從2003年開始接觸3D設計的，就我個人的經驗而言，3D軟件的研習之路可能要比Photoshop和Sketch難得多。但是作為一個互聯網設計師，個人覺得核心任務還是應該放在用戶體驗設計這塊，而沒必要將工作重心放在3D技術的修煉上。且就3D技術在UI動效的實際場景中的使用頻率來講，其用到的情況并不多。

這里簡單扼要地講解下我常用的一些3D類動畫工具。

1. Autodesk 3ds Max

Autodesk 3ds Max（全稱是Autodesk 3D Studio Max）是一款Discreet公司開發的（后Discreet被Autodesk公司合并）基于PC系統的三維動畫渲染和制作軟件，如圖1-32所示。由于Mac上缺少Framework系統組件，因此該軟件不支持Mac系統使用。Autodesk 3ds Max在模型、燈光、材質、渲染、角色動畫和3D視效方面表現非常棒。從5.0版本時代我便開始接觸3ds Max，也目睹了它的成長歷程。隨著6.0版本的推出，其先后整合了Partical flow（強大的粒子流系統）和Reactor（動力學插件）以及Character Studio（角色綁定插件）。對于3ds Max而言，其在使用上還有一個天然的優勢，即該軟件是三維數字藝術領域插件兼容維度中最廣的一個，且幾乎所有的渲染、動畫和特效腳本都有專門針對3ds Max的插件可供使用，并且許多插件現在仍在持續更新中。

3ds Max覆蓋了包括航天科技、房地產、數字化娛樂、游戲、醫療、旅游以及工業數字化設計等諸多領域。同時獨有的MAXScript可執行腳本也讓3ds Max如虎添翼，也使其成為當之無愧的3D數字解決方案翹楚。3ds Max也使得許多公司或工作室通過使用它而變得名聲大噪。

2. Autodesk Maya

Autodesk Maya是一個讓所有CGer（計算機圖形圖像設計師）都肅然起敬的軟件。當然，了解它的行業變遷的設計師，也知道它的另外一個名字——Alias Power Animation。Maya自從1993年誕生起，就注定了肩負著不平凡的“使命”。包括PIXAR（皮克斯，Pixar Animation Studios）、ILM（工業光魔，Industrial Light and Magic）等在內的眾多數字多媒體制作公司都是Maya的忠實用戶與合作伙伴，如圖1-33所示。

如今，Maya成了幾乎所有好萊塢視效三維解決方案的“專業戶”。例如，你可以隨意回憶一部CG數字作品或者全CG的動畫片，絕大多數都是用Maya來全程參與制作的。即使是真人電影的視覺特效部分，也到處充滿著Maya的數字幻象，如《變形金剛》《怪物史萊克》等。

應該說Maya是為數字娛樂而生的，相對3ds Max的全能性能來說，Maya對于數字電影的聚焦和專注程度是朝著極致的方向去的，特別是強大的角色動畫模塊和特效模塊。幾乎所有令人瞠目結舌的視覺效果都能通過Maya專屬的MEL語言腳本來實現。

3. MAXON Cinema 4D

MAXON Cinema 4D由德國Maxon Computer公司開發而成，其前身是1989年發布在一款名為Amiga的早期個人計算機操作系統上的軟件，最早時期Cinema 4D的別名叫作FastRay，當時還沒有所謂的圖形界面。1993年，FastRay更名為Cinema 4D 1.0，仍然在Amiga上發布。如今，Cinema 4D以極高的運算速度和強大的渲染插件備受廣大設計師的青睞，很多模塊的功能在同類軟件中代表著科技進步的成果，并且在用其描繪的各類電影中表現突出，隨著技術越來越成熟，Cinema 4D也被越來越多的電影公司所重視。

Cinema 4D的應用領域相當廣泛，在廣告、電影以及工業設計等方面都有出色的表現，如圖1-34所示。例如，在影片《阿凡達》中花鴉三維影動研究室的中國工作人員使用Cinema 4D制作了部分場景，在該片中Cinema 4D有如此優秀的表現，是很值得欣慰的一件事情。

Cinema 4D稱得上是三維數字影像領域的“常青樹”，也成為許多一流藝術家和電影公司進行場景制作的首選軟件，目前技術比較成熟。

當然，除了以上3款目前業內比較常用的3D類動畫軟件以外，還有許多其他類似的軟件可嘗試使用，這里不再過多描述，如圖1-35所示。

1.4.3 After Effects

本節介紹本書設計講解中使用到的主要工具——After Effects（大多數設計師習慣簡稱其為AE）。這是一款既實用又有意思的動畫軟件，功能非常強大。

1. 高協作性

在我看來，無論是針對Photoshop上的位圖、鋼筆路徑和內置的矢量圖形，或者是lllustrator中的純矢量元素層，又或者是Animate CC、Premiere等，其都擁有而且根據“層級”的基本工作原理所延展開來的“Adobe家族”的產品。After Effects的高協同性能是大多數動畫軟件無法比擬的，且絕大部分的快捷鍵都是通用的，如此一來用戶也就不需要再額外記憶更多的快捷鍵。Adobe家族的強大數字藝術解決方案群如圖1-36所示。

2. 效果插件的霸主平臺

無論是哪一款后期合成的第三方插件，想要在影視后期動畫行業被廣泛使用，首先要考慮的就是是否為After Effects平臺研發專門的效果插件?，F在市面上適用于After Effects的插件有上百款，而且這個數字還在持續地增加。試想，如果沒有這么大的用戶量，大家為什么非要選擇為After Effects研發專門的效果插件呢？對于用戶來說，插件多了，軟件實現效果的成本和難度也就大大降低了，這自然是一件令人愉悅的事情，也是大家選擇該軟件的原因之一，如圖1-37所示。

好萊塢視效大片中有許多特效鏡頭都是使用After Effects和其插件來完成的。以圖1-38所示的組合為例，這是一組專門針對After Effects而全面開源的AE動畫轉SVG的插件和動畫庫。當動畫完成以后，輸出成svg、canvas、html+js等格式，可以直接在瀏覽器上播放，甚至可以通過客戶端的原聲開發在移動設備上實現渲染和播放。所以不能再說After Effects只是個視頻處理軟件了。因為基本上那些所謂的小而美的動畫效果的制作，After Effects都不在話下。且最重要的是，原來一直被當作話柄的“網絡弱關聯性”（由于早期After Effects輸出的視頻體量過大，不適合于網絡流媒體播放對于體量和網速的要求，所以前幾年After Effects制作的視頻基本上與互聯網動效無黏性），也會因為這類輔助插件的產生而終結。

另外，After Effects制作出的動畫效果，也遠不是那些原型軟件可以比擬的。具體我們可以在后邊的案例中再去感受，這里不再多說。