1.4 UI動(dòng)效制作的工具介紹

由于篇幅所限，這里只就目前行業(yè)比較常用的動(dòng)畫軟件做一個(gè)簡(jiǎn)單的介紹。

1.4.1 二維/原型類動(dòng)畫工具

1. Animate CC

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

主要用途：制作多媒體動(dòng)畫。

優(yōu)勢(shì)：Adobe系常用產(chǎn)品，有一定的用戶基礎(chǔ)，新的版本能較好地兼容HTML5等網(wǎng)頁(yè)格式。

劣勢(shì)：除非具有較好的ActionScrip編寫能力，一般情況下能實(shí)現(xiàn)的視覺效果只能以二維平面基礎(chǔ)類型的為主。一直以來(lái)，我個(gè)人總覺得用它來(lái)做動(dòng)效或者原型動(dòng)畫有點(diǎn)“殺雞焉用牛刀”的感覺，如果想做一些比較復(fù)雜的動(dòng)畫效果，且設(shè)計(jì)師自身對(duì)軟件掌握得較好，可以嘗試一下。

2. Flinto

Flinto for Mac（暫無(wú)Windows版本）是一款輕量、高效的綜合性交互原型設(shè)計(jì)工具，可以使用它創(chuàng)建任何原型。從最簡(jiǎn)單的頁(yè)面跳轉(zhuǎn)到令人印象深刻的精美轉(zhuǎn)場(chǎng)動(dòng)效，無(wú)須任何代碼，也沒有復(fù)雜的時(shí)間軸，F(xiàn)linto的可操作性幾乎是所有原型工具中最為簡(jiǎn)單和快捷的，如圖1-29所示。

主要用途：制作動(dòng)態(tài)可交互原型。

優(yōu)勢(shì)：體量小，并且安裝好專門的Sketch插件之后，可實(shí)現(xiàn)與Sketch的無(wú)縫結(jié)合；iPhone端有專門的App可供下載，且支持手機(jī)實(shí)時(shí)預(yù)覽原型方案，同時(shí)可以在手機(jī)上執(zhí)行交互演示。

劣勢(shì)：僅限于Mac設(shè)備使用；不可實(shí)現(xiàn)相對(duì)復(fù)雜的交互效果；對(duì)于其他設(shè)計(jì)領(lǐng)域的實(shí)際運(yùn)用支持度不高。

3. Principle

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

主要用途：制作動(dòng)態(tài)可交互原型。

優(yōu)勢(shì)：容易上手，并且和Sketch的整合度較高，支持App下載效果預(yù)覽。

劣勢(shì)：僅限于Mac設(shè)備；不可實(shí)現(xiàn)相對(duì)復(fù)雜的交互效果制作。

4. Tumult Hype

Tumult Hype是一款HTML5動(dòng)畫開發(fā)工具，可以創(chuàng)建豐富的網(wǎng)頁(yè)交互動(dòng)畫，支持層、時(shí)間軸等編輯方式，并支持導(dǎo)出HTML5、CSS3、JavaScript等網(wǎng)頁(yè)格式文件，在ios或Android平臺(tái)上表現(xiàn)流暢，如圖1-31所示。其特點(diǎn)是可以在網(wǎng)頁(yè)上做出悅目的動(dòng)畫效果，且配備有中文版，但是對(duì)于復(fù)雜效果制作與演練的支持度較低，畢竟只是針對(duì)HTML的一個(gè)非常好用的動(dòng)畫工具。

主要用途：制作動(dòng)態(tài)可交互原型。

優(yōu)勢(shì)：使用者無(wú)須編程基礎(chǔ)也可以做動(dòng)效；對(duì)于網(wǎng)頁(yè)和HTML5的支持度比較好，可直接生成HTML5格式的文件。

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

1.4.2 3D類動(dòng)畫工具

我是從2003年開始接觸3D設(shè)計(jì)的，就我個(gè)人的經(jīng)驗(yàn)而言，3D軟件的研習(xí)之路可能要比Photoshop和Sketch難得多。但是作為一個(gè)互聯(lián)網(wǎng)設(shè)計(jì)師，個(gè)人覺得核心任務(wù)還是應(yīng)該放在用戶體驗(yàn)設(shè)計(jì)這塊，而沒必要將工作重心放在3D技術(shù)的修煉上。且就3D技術(shù)在UI動(dòng)效的實(shí)際場(chǎng)景中的使用頻率來(lái)講，其用到的情況并不多。

這里簡(jiǎn)單扼要地講解下我常用的一些3D類動(dòng)畫工具。

1. Autodesk 3ds Max

Autodesk 3ds Max（全稱是Autodesk 3D Studio Max）是一款Discreet公司開發(fā)的（后Discreet被Autodesk公司合并）基于PC系統(tǒng)的三維動(dòng)畫渲染和制作軟件，如圖1-32所示。由于Mac上缺少Framework系統(tǒng)組件，因此該軟件不支持Mac系統(tǒng)使用。Autodesk 3ds Max在模型、燈光、材質(zhì)、渲染、角色動(dòng)畫和3D視效方面表現(xiàn)非常棒。從5.0版本時(shí)代我便開始接觸3ds Max，也目睹了它的成長(zhǎng)歷程。隨著6.0版本的推出，其先后整合了Partical flow（強(qiáng)大的粒子流系統(tǒng)）和Reactor（動(dòng)力學(xué)插件）以及Character Studio（角色綁定插件）。對(duì)于3ds Max而言，其在使用上還有一個(gè)天然的優(yōu)勢(shì)，即該軟件是三維數(shù)字藝術(shù)領(lǐng)域插件兼容維度中最廣的一個(gè)，且?guī)缀跛械匿秩尽?dòng)畫和特效腳本都有專門針對(duì)3ds Max的插件可供使用，并且許多插件現(xiàn)在仍在持續(xù)更新中。

3ds Max覆蓋了包括航天科技、房地產(chǎn)、數(shù)字化娛樂(lè)、游戲、醫(yī)療、旅游以及工業(yè)數(shù)字化設(shè)計(jì)等諸多領(lǐng)域。同時(shí)獨(dú)有的MAXScript可執(zhí)行腳本也讓3ds Max如虎添翼，也使其成為當(dāng)之無(wú)愧的3D數(shù)字解決方案翹楚。3ds Max也使得許多公司或工作室通過(guò)使用它而變得名聲大噪。

2. Autodesk Maya

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

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

應(yīng)該說(shuō)Maya是為數(shù)字娛樂(lè)而生的，相對(duì)3ds Max的全能性能來(lái)說(shuō)，Maya對(duì)于數(shù)字電影的聚焦和專注程度是朝著極致的方向去的，特別是強(qiáng)大的角色動(dòng)畫模塊和特效模塊。幾乎所有令人瞠目結(jié)舌的視覺效果都能通過(guò)Maya專屬的MEL語(yǔ)言腳本來(lái)實(shí)現(xiàn)。

3. MAXON Cinema 4D

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

Cinema 4D的應(yīng)用領(lǐng)域相當(dāng)廣泛，在廣告、電影以及工業(yè)設(shè)計(jì)等方面都有出色的表現(xiàn)，如圖1-34所示。例如，在影片《阿凡達(dá)》中花鴉三維影動(dòng)研究室的中國(guó)工作人員使用Cinema 4D制作了部分場(chǎng)景，在該片中Cinema 4D有如此優(yōu)秀的表現(xiàn)，是很值得欣慰的一件事情。

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

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

1.4.3 After Effects

本節(jié)介紹本書設(shè)計(jì)講解中使用到的主要工具——After Effects（大多數(shù)設(shè)計(jì)師習(xí)慣簡(jiǎn)稱其為AE）。這是一款既實(shí)用又有意思的動(dòng)畫軟件，功能非常強(qiáng)大。

1. 高協(xié)作性

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

2. 效果插件的霸主平臺(tái)

無(wú)論是哪一款后期合成的第三方插件，想要在影視后期動(dòng)畫行業(yè)被廣泛使用，首先要考慮的就是是否為After Effects平臺(tái)研發(fā)專門的效果插件。現(xiàn)在市面上適用于After Effects的插件有上百款，而且這個(gè)數(shù)字還在持續(xù)地增加。試想，如果沒有這么大的用戶量，大家為什么非要選擇為After Effects研發(fā)專門的效果插件呢？對(duì)于用戶來(lái)說(shuō)，插件多了，軟件實(shí)現(xiàn)效果的成本和難度也就大大降低了，這自然是一件令人愉悅的事情，也是大家選擇該軟件的原因之一，如圖1-37所示。

好萊塢視效大片中有許多特效鏡頭都是使用After Effects和其插件來(lái)完成的。以圖1-38所示的組合為例，這是一組專門針對(duì)After Effects而全面開源的AE動(dòng)畫轉(zhuǎn)SVG的插件和動(dòng)畫庫(kù)。當(dāng)動(dòng)畫完成以后，輸出成svg、canvas、html+js等格式，可以直接在瀏覽器上播放，甚至可以通過(guò)客戶端的原聲開發(fā)在移動(dòng)設(shè)備上實(shí)現(xiàn)渲染和播放。所以不能再說(shuō)After Effects只是個(gè)視頻處理軟件了。因?yàn)榛旧夏切┧^的小而美的動(dòng)畫效果的制作，After Effects都不在話下。且最重要的是，原來(lái)一直被當(dāng)作話柄的“網(wǎng)絡(luò)弱關(guān)聯(lián)性”（由于早期After Effects輸出的視頻體量過(guò)大，不適合于網(wǎng)絡(luò)流媒體播放對(duì)于體量和網(wǎng)速的要求，所以前幾年After Effects制作的視頻基本上與互聯(lián)網(wǎng)動(dòng)效無(wú)黏性），也會(huì)因?yàn)檫@類輔助插件的產(chǎn)生而終結(jié)。

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