隨著互聯(lián)網(wǎng)的不斷發(fā)展，特別是Web開發(fā)工作的比重日漸加大，HTML 5正以一往無前之勢邁出自己的普及步伐。HTML 5目前已經(jīng)成為Web設計師與開發(fā)者們最為青睞的語言之一。它為我們帶來了豐富的功能組合，包括跨瀏覽器兼容能力、擁有出色定義的標簽、易用性、***視覺沖擊力的元素、支持JavaScript等腳本語言以加強功能、層疊樣式表（即CSS）集成以重新定義顯示效果等等。而就在HTML 5興起的同時，動畫、視頻與音頻作為表現(xiàn)手段也開始大量加入進來。如今的瀏覽器不再需要依賴插件即可顯示交互動畫。將JavaScript、HTML 5與CSS 3相結(jié)合能夠創(chuàng)建出令人過目難忘的精彩動畫效果。這些動畫不僅能夠讓我們的網(wǎng)站從同類站點當中脫穎而出，同時也將帶來更多潛在客戶。

目前市面上可供選擇的動畫工具非常豐富，而我們則從其中整理出了十二款最為卓越的工具選項。在這些工具的幫助下，大家不僅能夠擁有更為輕松的動畫創(chuàng)建流程，同時也能獲得更多收益——一旦開始使用，它們將為各位的網(wǎng)站帶來***的深度。這些工具一部分能夠在線使用（需要互聯(lián)網(wǎng)連接），一部分則可以下載并作為支持該軟件的系統(tǒng)平臺上的獨立應用來運行。

下面讓我們首先來看各在線HTML 5動畫制作工具。

1) Animatron: 動畫巨頭工具

顧名思義，這款工具能夠創(chuàng)建出優(yōu)秀的HTML 5動畫。其出色的易用性讓新手與專家之間的邊界變得非常模糊。此外，它也允許我們將項目保存在云端并隨時加以訪問。有了這款強大的編輯工具，我們可以創(chuàng)建出各類適合不同平臺的動畫內(nèi)容——從臺式電腦到移動設備皆可輕松應對。

2) HTML5 Maker: 您的廣告生成器

這款工具當中收錄了大量模板，大家可以選擇合適的項目建立自己的網(wǎng)站。各位只需要替換模板當中的文字與圖像，即可輕松完成創(chuàng)建。這款工具主要面向廣告公司等用戶，其中包含豐富的動畫資源，可用于設計出各類出色的banner。

3) GSAP:下一代動畫工具

GSAP是一款現(xiàn)代瀏覽器，允許設計師將任何顯示元素創(chuàng)建為動畫，而又無需預先定義作為選項儲備的屬性列表。即使某些功能沒有被直接提供，大家也可以通過創(chuàng)建插件的方式加以實現(xiàn)。它能夠?qū)⒓虞d時間控制在***水平，從而帶來出色的性能表現(xiàn)，這是因為它的起效并不基于任何第三方工具。除此之外，它還擁有一整套活躍的支持社區(qū)，能夠瞬間為我們帶來良好的問題解決辦法。

4) Mugeda: 基于云的動畫設計工具

Mugeda能夠幫助設計師將自己的想象與構(gòu)思真正轉(zhuǎn)化為堪稱視覺奇跡的元素、迷你游戲、banner以及填充效果。Mugeda Cloud Studio與Mugeda Java Script API提供了一套獨特的平臺，在這里開發(fā)人員與設計師能夠協(xié)同工作，從而大大降低構(gòu)建所需的時間與成本。它還提供基于云的專業(yè)IDE，其中包含有操作、時間軸與符號等。

好了，接下來我們一起來看看那些能夠作為獨立應用程序自主運行的各類工具。

#p#

5) Google Web Designer:一款令人贊嘆的動畫工具

創(chuàng)意工廠谷歌公司此次拿出的方案同樣值得我們大加贊揚。這款工具能夠使用大部分美觀且***感染力的HTML 5內(nèi)容，從而打造出符合想象的視覺效果。它為我們帶來多種***進的動畫功能，包括以任意軸為參考操縱3D對象并旋轉(zhuǎn)2D設計對象。除了設計工作之外，它還能夠與Google Drive、DoubleClick Studio以及Ad Words等解決方案相整合。

6) Edge Animate CC:來自Adobe的動畫工具

隨著Adobe Edge Animate的出現(xiàn)，如今動畫制作工作已經(jīng)變得更為輕松。它能夠更好地與各類桌面及移動瀏覽器協(xié)作并為其提供支持。它創(chuàng)建出的動畫可承載豐富的媒體元素、數(shù)字化出版物、廣告、Web乃至其它重要內(nèi)容。在***版本中，這款工具還能夠?qū)崿F(xiàn)音頻、腳本載入以及響應度調(diào)整等功能。

7) Radi: ***矢量圖形處理工具

Radi是一款用于在Mac OS X系統(tǒng)平臺上創(chuàng)建動畫、視頻以及實時圖形的工具。在Radi的幫助下，大家用不著再費心將網(wǎng)絡頁面渲染成視頻文件，而只需要創(chuàng)建一個〈video〉元素并將其拖拽到頁面層中即可。它還擁有一項獨特的功能，允許大家直接在應用程序當中創(chuàng)建矢量圖形。

8) Hippo studios: 強大的動力車間

Hippo studios提供一系列豐富的功能選項，能夠切實幫助我們完成動畫設計。它允許用戶使用矢量圖形對對象尺寸進行***雕琢。大家可以將YouTube、MP4、Ogg以及WebM等格式的視頻資源添加進入并利用HTML 5進行播放。除此之外，它還允許我們向其中添加幻燈片及圖像網(wǎng)格。

#p#

9) Node Fire:理想的響應式動畫創(chuàng)建工具

Node Fire是一款響應式動畫創(chuàng)建工具，能夠被用于開發(fā)Web應用程序以及獨立應用程序。它能夠自動處理鼠標及點觸操作事件并提供延遲計時器支持機制，從而實現(xiàn)各類復雜的操作方式。在這款工具的幫助下，設計師們能夠創(chuàng)建出任意CSS樣式動畫并在設計模式下追蹤動畫的變化情況。值得一提的是，它還將場景窗口概念的支持能力提升到了新的高度。這一概念允許大家創(chuàng)建多個窗口，添加或者刪除其中某個窗口。我們也可以在某個事件被觸發(fā)時播放以及暫停這些窗口的視覺效果。

10) Tumult Hype 3:讓內(nèi)容更加豐富

Tumult Hype的關(guān)鍵幀動畫能夠讓顯示內(nèi)容變得更加豐富。這款工具會幫助用戶創(chuàng)建出電子卡片、教育電子書（通過在現(xiàn)有電子書基礎上添加更多動畫化教育內(nèi)容）乃至信息圖表（用于實現(xiàn)數(shù)據(jù)點的可視化與展示工作）等等。它還集成了一套JavaScript編輯器，能夠幫助大家根據(jù)實際需要編寫出自定義功能。

11) Motion Composer:一套高度自動化解決方案

Motion Composer能夠針對每一種內(nèi)容狀態(tài)創(chuàng)建出幻燈片，而不必另行為其選定動畫樣式，這就大大降低了用戶的工作負擔。此外，它還能夠自動創(chuàng)建出動畫路徑而無需對動畫內(nèi)容進行逐幀操作，這又進一步簡化了相關(guān)流程。我們所創(chuàng)建出的動畫成果能夠在各類平臺上正確顯示——包括臺式機、智能手機以及平板設備等。

12) Purple Animator: 你的應用程序開發(fā)工具

Purple Animator能夠被用于移動平臺以及臺式機設備。這款工具從本質(zhì)上講專門面向數(shù)字化出版物，從而使整個生產(chǎn)過程變得輕松且快捷。它能協(xié)助大家開發(fā)出自己的游戲、雜志、網(wǎng)站以及應用程序。它還允許我們利用時間軸編輯器設計出各種美輪美奐的動畫效果。

在今天的文章中，我們列舉了十二款出色的HTML 5動畫創(chuàng)建工具。其中一部分能夠以在線方式直接使用，另外一些則支持下載并以獨立應用程序方式自主運行。本文的主要目的在于整理出一套實用工具列表，其中的每款工具都能夠在至少一個方面獨當一面，包括游戲、動畫、廣告、HTML標簽瀏覽器兼容性測試以及3D動畫等。

也許大家在日常工作中也有著自己的選擇，并認為它們足以同樣名列此份榜單。請在評論欄中分享您的觀點，幫助我們及更多設計與開發(fā)人員從您的真知灼見中受益。

原文鏈接：http://codecondo.com/tools-for-creating-animations-with-html5/

原文標題：Top 12 Tools for Creating Animations with HTML5