1.6 動效制作軟件

在設計動效時，可根據動效的需求選擇合適的軟件進行設計，也可以組合選擇幾種軟件共同設計，下面介紹常用的動效設計軟件。

1.6.1 After Effects

Adobe After Effects簡稱AE，是Adobe公司推出的一款特效制作軟件，適用于從事設計和視頻特效的機構使用，包括動畫制作公司、影視特效后期制作工作室以及多媒體工作室。Adobe After Effects軟件可以精確地創建無數種引人注目的動態圖形和震撼人心的2D或3D視覺效果，很多美國大片都是通過它來進行后期合成制作的。該軟件包含數百種預設的效果和動畫，能與其他Adobe軟件進行緊密集成和高度靈活地合成，為設計作品增添令人耳目一新的效果。

After Effects是一款功能超強大的動效制作軟件，目前是動效設計的首選軟件。使用該軟件基本上可以制作出各種動效效果，同時導出的格式也比較豐富，缺點是交互效果差。

After Effects軟件的下載頁面：https://www.adobe.com/cn/products/aftereffects.html，如圖1-17所示。

1.6.2 Adobe Photoshop

Adobe Photoshop（簡稱PS），可能很多人都認為PS只用來作圖和處理圖像的，并不知道PS可以做Gif動效，其實在AE沒有流行起來的時候，當時的UI設計師都是用PS做Gif動圖，用Flash做Demo（過去我們只需要做PC桌面的動效）。PS從CS6之后開始進一步加強了動效的模塊，現在的版本能夠實現很多相對復雜的動效。

Adobe Photoshop軟件的下載頁面：https://www.adobe.com/cn/products/photoshop.html，如圖1-18所示。

1.6.3 Adobe Illustrator

Adobe Illustrator是一種應用于出版、多媒體和在線圖像的工業標準矢量插畫軟件，作為一款非常好用的矢量圖形處理工具，該軟件不僅能夠繪制高精度的矢量圖，而且可以為線稿提供較高的精度和控制。

該軟件主要應用于印刷出版、海報書籍排版、專業插畫、多媒體圖像處理和互聯網頁面的制作等。

Adobe Illustrator軟件的下載頁面：https://www.adobe.com/cn/products/illustrator.html，如圖1-19所示。

1.6.4 Adobe Edge Animate

Adobe Edge Animate是Adobe公司的一款新型網頁互動工具，允許設計師通過采用HTML5、JavaScript、jQuery和CSS3等技術制作跨平臺、跨瀏覽器的網頁動畫，能夠生成基于HTML5的動畫，可以方便地通過互聯網傳輸，支持Android、iOS、WebOS，是一套完整的Web動畫開發工具。

Adobe Edge Animate軟件的下載頁面：https://www.adobe.com/lu_en/products/edge-animate.html，如圖1-20所示。

1.6.5 Adobe Animate CC

Adobe Animate CC由Adobe Flash Professional CC轉變而來。2015年12月2日，Adobe公司宣布Flash Professional更名為Animate CC，在支持Flash SWF和AIR格式文件的基礎上，增加了HTML5動畫制作以及交互設計功能，支持HTML5 Canvas、WebGL，強化HTML5動畫制作規范。Adobe Animate CC相對Flash來說，擁有更多的新特性，能通過可擴展架構去支持包括SVG在內的幾乎任何動畫格式。

Adobe Animate CC軟件的下載頁面：https://www.adobe.com/cn/products/animate.html，如圖1-21所示。

1.6.6 Quartz Composer

Quartz Composer（簡稱QC）是一款圖形化的編程工具，也是一個強大的動畫合成軟件，為Apple在10.4Tiger的開發軟件包中自帶的、專門用來生成各種動態視覺效果。該工具功能齊全，不需要寫一行的編碼就可以做出非常復雜的動畫，包括可交互的界面原型，輸出到Interface Builder給程序用，或者輸出Quicktime。

利用QC生成的交互原型是可操作的，而且生成的動態效果靈活豐富，自由度非常高，另外基本可以不寫代碼就實現生成動態效果與交互所需要的邏輯。在QC中，我們可以通過Timeline Patch來自定義動態變化的軌跡。

與QC相比，After Effects制作的交互演示動畫是不可交互的，HTML/CSS/JS可以實現交互，但動畫效果沒有QC豐富靈活，用QC來實現動畫效果某種程度上相當于用代碼把動畫效果寫出來，但是QC效率不如AE高。如果制作網頁動畫的話，盡量使用HTML/CSS設計。可以把QC想象成圖形化的jQuery，只需把封裝好的代碼模塊組裝且設好參數，便可以生成各種動態效果。

1.6.7 Principle

Principle可以很容易地設計動畫和交互式用戶界面。無論是設計一個多界面應用程序，還是新的交互和動畫，使用Principle都能設計出令人驚異的效果。

Principle是目前制作可交互Demo容易掌握、體驗效果較好的軟件，Principle是為Web、移動和桌面動畫以及交互式用戶界面設計的工具。在虛擬現實中使用Principle可以很快評估你的設計，從而加快了設計開發周期，

Principle的官方網址：http://principleformac.com/，如圖1-22所示。

1.6.8 Framer

Framer是用于設計可交互動效的軟件，可快速導入Photoshop、Sketch中的圖像并模擬圖層分層，支持手勢，能在手機或平板中預覽。Framer的官方網頁：https://framer.com/。Framer的中文網：http://framerjscn.github.io/，如圖1-23所示。

1.6.9 jQuery

jQuery是一個響應速度快、軟件占用內存小、功能豐富的JavaScript庫，極大地簡化了JavaScript編程，使HTML文檔編輯、事件處理、動畫和Ajax等操作更加簡單，易于使用API兼容多種瀏覽器。jQuery結合多功能和可擴展性于一體，改變了數百萬人編寫JavaScript的方式。

jQuery軟件的官方網頁：https://jquery.com/，如圖1-24所示。

1.6.10 Origami

Origami可以測試、迭代、驗證用戶的設計，是一個設計現代接口的免費工具，廣泛被Facebook的設計人員使用。

Origami的官方主頁：https://Origami.design/，如圖1-25所示。

1.6.11 Cinema 4D

Cinema 4D是德國MAXON公司出品并整合3D模型、動畫與算圖的高級三維繪圖軟件，一直以高速圖形計算速度著名，并有令人驚奇的渲染器和粒子系統。Cinema 4D包含了多種現代3D藝術家所需要的強大建模工具，包含Bones、NURBS和最簡單、易用、有效的燈光選項，其渲染器在不影響速度的前提下，使圖像品質有了很大提高。Cinema 4D應用廣泛，在廣告、電影、工業設計等方面都有出色的表現。

Cinema 4D的下載頁面：https://www.maxon.net/cn/產品/cinema-4d/cinema-4d/，如圖1-26所示。

1.6.12 Flinto

Flinto是一款輕量、高效的綜合性交互原型設計工具，用戶可以使用它創建任何原型，從最簡單的頁面跳轉到令人印象深刻的精美交互動效，不需要任何代碼也沒有復雜的時間軸，Flinto的可操作性幾乎是所有原型工具中最簡單快捷的，五分鐘制作高保真交互原型，能夠快速實現各種滾動、轉場、點擊反饋效果，這正是所有交互設計師所期待的。Flinto的網址：http://www.flinto.com.cn/。

1.6.13 Hype

Hype為Mac OS平臺上一款功能強大的HTML5創作工具，是一款幫助不會編程的用戶輕松創建HTML 5和復雜動畫效果的網頁設計軟件，可以創作豐富的網頁交互動畫，支持層、時間軸等編輯方式，并能完美導出HTML5/CSS3/JavaScript，在iPhone或Android平臺上流暢表現，其長處是可以在網頁上做出悅目的動畫效果，且無須Flash插件。Hype 3采用全新UI設計，增加了24種時間功能，還有物理特性和彈性曲線，可以發揮更強大的動畫效果。