過去三年內，這種編程語言的使用人數急劇增長。開發人員可以使用這種語言來創建各種改進的內容。隨著每一個新版本的發布，HTML通過更好的功能和技術漸漸占據了制高點。

HTML5也逐漸出現在企業們的視線中，以其便捷性，并且能夠提供多種功能。例如內置的視覺元素，指定的結構標記，互動的拖放功能等等。

開發人員可以利用這些功能來創建充滿吸引力的網站。此外，它還擁有現代瀏覽器，如Chrome，IE和Firefox的支持。

使用HTML5創建的動畫可以使得網站更吸引用戶的眼球，從而達成更多的業務。

但是，創建動畫是一個耗時且繁瑣的過程。（其實網絡上搜索出來的動畫都花費了HTML5前端工程師很多心血啊！所以不要再吐槽啦！）

為了簡化這個過程，現在的市場上有許多可用的HTML5動畫工具。既有付費的，也有免費的，都可以幫助你為你的網站創造驚艷的動畫。這里我們將列出其中一些必要的HTML5動畫工具。

Animatron

使用直觀的Animatron編輯器來設計和發布動畫和交互內容，這些動畫和交互內容可應用于從臺式機到移動設備的每個地方。

Blysk

使用你曾經在其他動畫工具上的經驗，只要一秒鐘就可以開始使用Blysk工作——我們都不希望重新發明輪子，這是一個內置于瀏覽器的優秀工具。

Createjs

這是一個可以使得工作于HTML5 Canvas元素變得容易的JavaScript庫。對于創建游戲、生成藝術和其他高度圖形化的體驗非常有用。

Hippo Studios

Hippani Animator是一款流行的HTML動畫工作室。

它可以很容易制作可擴展的交互式動畫，復雜的游戲，視頻，演示，app和多媒體網站。比其他任何HTML5動畫制作軟件能發布更多在網頁瀏覽器和設備上。

HTML5 Maker

HTML5MAKER Online Editor支持所有流行的文本過濾器，所以你不需要用Photoshop創建看起來酷的文本。

這里為你提供了大量的圖像集合，既可以用于你的項目，也可以改變屬性并創建一種驚艷的類似于照片分享的效果。

你可以創造出令人吃驚的轉換和緩沖的動畫，當然還有時間軸，它允許你完全控制你動畫。

Mixeek

這是一款用來設計和運行Web動畫和交互的免費應用工具。它基于JavaScript，CSS3和HTML5，它有著輕量級、已使用的特點。

讓開發邊等更簡單一點，是Mixeek。

Mugeda

Mugeda致力于為富媒體內容提供基于云的解決方案。

Mugeda平臺，一種在線的基于HTML5的技術，可用來打造專業的HTML5富媒體創意，這些創意可以被部署到如計算機，智能手機，平板電腦和智能電視這樣的智能設備。

總結

HTML5使得開發者能為你的網站創建出驚人的動畫效果。

這些很棒的動畫效果會為你的網站增添更多吸引力。

本文為大家列舉了幾個千鋒教育成都校區HTML5培訓學員使用的動畫工具，希望有幫助哦~

但是是不是很多學員看到了以上的工具卻不會使用呢？小白們，還不快加入我們千鋒教育的HTML5程序員大軍的隊伍？

5工具中，比較常聽到的是易企秀這種以APP為主的移動展示工具。這種類型的H5工具，定位為手機PPT的在線展示，操作簡單，個人用戶較多。

但從功能豐富度和實用性角度，國內屬于行業頂尖的是iH5和意派兩家，它們具有兩個共同的基本特征：

（1）提供HTML5頁面的可視化編輯器；

（2）通過電腦端網頁在線制作，能一鍵生成鏈接。

然而，兩者在本質上有所差別，iH5偏向于底層交互，意派偏向于輕度營銷。這兩個區別表面看上去很簡單，背后有什么深意？

·

第1張圖：用戶的差別

類比圖像制作軟件，可以簡單地概括為：

• iH5：H5界的Photoshop，以企業用戶為主；

• 意派：H5界的美圖秀秀，以個人用戶為主。

從上圖可以看出，使用iH5的設計師，主要接受不同規模公司的定制需求，但也有部分個人用戶。由于面向底層交互，iH5提供的功能都是基礎應用類型的，基本替代了傳統上由專業程序員編寫HTML5代碼的工作，更受企業青睞。因此，使用該工具的設計師一般處于品牌推廣團隊中，負責成品頁面的實現。

使用意派的設計師，大部分接受來自個人或小公司的制作需求，但也有部分企業用戶。這種面向輕營銷的H5工具，相當于把PPT實現的功能通過在線網頁展示出來，交互思路以翻頁為主，更適用于個人用戶。但由于個人市場目前被易企秀這類更容易上手的APP所占領，意派所占份額實際比較有限。

·

第2-3張圖：功能的差別

H5頁面制作服務所需組件主要有四種類型：

（1）多媒體：iH5比意派多6個功能；

（2）容器：iH5比意派多6個功能；

（3）數據應用：iH5比意派多7個功能；

（4）特效：iH5比意派多8個功能.

在上圖中，標示Epub 360的四個彩色區域表示意派和iH5重疊的組件服務，灰色區域表示iH5獨有的組件。

意派在多媒體方面提供的服務與iH5比較接近，但在容器、數據應用和特效三個方面都不及iH5的二分之一。如果只計算意派不具有的組件服務，iH5比意派多27個組件，但由于兩種工具部分組件存在交叉現象，從總量上看相差20個。

為什么會產生這樣的差距？

·

第4張圖：性能的差別

在iH5獨有的組件中，具有決定性作用的是“萬金油”式的事件（組），能通過邏輯判斷為其他組件拓展出無限種可能：

• 手指按住屏幕的時間長短；

• 手勢擦除面積的大小；

• 微信錄音的開始或結束；

• 數據提交次數是否超限。

上圖是iH5在視頻組件下添加一個事件時，配套的18種觸發條件，表示能為視頻做18種邏輯判斷。

是否使用事件機制，對工具性能有很大影響——

（1）通過事件，iH5的設計師能對交互行為進行邏輯判斷，并設計各種各樣的反饋動作，比如設置視頻播放到某一時刻時彈出廣告。因此，用戶能利用事件的組合，規定成千上萬種“如果……就……”的反應情形。

（2）沒有事件，所有的組件都是割裂的，比如視頻的播放只能局限在視頻組件內部進行控制。這也導致意派有很多組件存在重復功能，因為每個組件的反饋機制基本是獨立的。

在事件的幫助下，設計師可以實現很多傳統上必須程序員介入才能完成的交互邏輯。既然事件那么重要，為什么國內H5工具中只有iH5使用事件機制？

·

第5張圖：結構的差別

實際上，iH5和意派的差別取決于工具結構上的差異：

• iH5：使用“對象樹”管理資源，頁面作為眾多資源的一種；

• 意派：使用頁面布局，主要提供基于頁面的翻頁交互。

下圖為兩個工具的編輯界面。

iH5以交互作為出發點，采用DOM（文檔對象模型）結構，提供的組件基本是對象類型的，諸如屏幕、時間軸、數據庫等。因此，用戶能通過“對象樹”對不同類型的組件進行管理，這也是事件機制可行的基礎。

意派則以模板作為出發點，采用頁面結構，提供的組件基本是模塊類型的，諸如相冊、計時器等。實際上，這種工具相當于收集不同類型HTML5網頁模板的源碼，把它們拆解成不同模塊，再分別開發成套件。因此，用戶只能在預設格式的套件內調整內容，拓展性較低。

·

第6張圖：成本的差別

從費用上來看，兩種工具的使用成本也有所差異：

• iH5：所有組件的使用均免費，對4種服務按需收費；

• 意派：7個組件的使用需要付費，對12種服務收取年費。

意派將賬號分為體驗版、基礎版、專業版、企業版和企業增強版五種類型，在作品創建數量、存儲空間、表單、數據應用等基礎功能上均有限制，并對加載LOGO等服務進行收費，年費最高達59999元。

iH5對自定義微信授權、自定義LOGO加載、調用第三方JS函數和作品嵌入第三方網站四種主要用于企業的服務進行收費，其中微信授權費用為1元/月，所有增值服務按年計最高為12012元，為意派的五分之一。

·

雖然iH5和意派均提供基于云端的可視化編輯服務，但通過用戶、功能、性能、結構、和成本五個方面的對比，可以看出兩者還是存在很大區別。

簡單地說，意派屬于輕度營銷類H5工具，是通過利用HTML5的跨平臺特性，把傳統的離線PPT轉換為在線展示；而iH5是以交互為思路的基礎工具，能最大程度地取代程序員在網頁設計中的角色。

的一生，能有多少個10年？

幾歲，有些懵、有些懂；

10多歲，以為整個世界很快都是自己的；

20多歲，才知道自己一直在為別人活著；

30多歲，“理想”兩個字，可以變得很輕，也可以變得很重。

如果你愿意停下來，留出不到3分鐘的時間，可以聽聽這個人最近10年是怎么過來的——他是iH5的創始人孟智平，大家叫他老孟。

2017

——“反正你也不是第一次創業了。”

對面的人篤定地說。

——“這是我第一次創業。”

老孟平靜地應答，空氣揚起一陣干笑聲。

同樣30多歲、在數字營銷界小有名氣的李三水，已經混遍中藥廠、書店、飯店、時裝店、瑜伽館、淘寶店等各行各業，W甚至是他進的第四家廣告公司了。

而這個被大家親切地稱作“老孟”的人，卻把一門心思都放在iH5——這個他醞釀了整整10年的產品上。從他決定要做這樣的一件事，到他從瑞典辭職歸國，再到他在北京、上海、廣州、深圳立下根據地，一路沒有回頭。

距離iH5第三版的公布，還有不到5天。

這三個版本，可以理解成Windows 98、Windows XP和Win 10的區別。微軟系統的更新迭代，是個人計算機一步步搶占全球市場的體現；而iH5的更新迭代，又和HTML5網頁在互聯網的奮斗史并駕齊驅。

但中間也會經歷各種被質疑、再洗牌、離離合合的波折。

2006

那是國內互聯網剛興起視頻熱的時候，優酷、土豆、酷6還在萌芽，百度、騰訊還沒進軍視頻市場，也沒有H5這個說法。對大部分人來說，能在網上看視頻就很稀奇了。

一次，老孟看到視頻里的女孩提著個漂亮的包，就想：它是什么牌子？多少錢？在哪里能買得到？

現在我們知道iH5可以快速生成這樣的交互視頻，你用鼠標一點手提包，就能彈出商品介紹。但當時沒人給他答案，他只能自己死命鉆研。

你肯定想象不到，這時的老孟在國外過著早上10點上班，下午4點下班的生活——他閑著沒事還可以去湖邊釣魚。

那是2006年，他是瑞典愛立信的項目負責人，衣食無憂、有娛有樂。而同樣是這一年，他申請到第1個視頻交互的專利。

1年后，他辭了職。在3年前一場演講中，他解釋原因：

“過早地步入了晚年生活，我不甘心這樣。”

2007~2008

“我辭職了。”這天，李斌接到一通越洋電話，掛下電話后一直難以平靜。

電話是老孟打過來的，當老孟決定回國實現自己的想法時，第一時間想到的就是拉這個大學時期的舍友入伙——

數理物化生全才，小學完成高數、微積分等大學課程，高中參加Linux系統的開源工作，大學就帶領國際團隊開發Linux。

李斌當場同意。

于是，兩人開始在上海落腳，很快研究出視頻交互的技術方案。但因為想法太超前，很多視頻網站并不理解這種新興概念，融資極為困難。

只消半年，他們就把自己的積蓄花完了。

2007年，老孟去了趟西藏，在墨脫無人區徒步穿行。這是一個被很多驢友稱為“鬼都不去的地方”，有世界第一深的大峽谷、全球最北的熱帶森林、還有雪山泥沼，最缺的就是人。

（老孟在墨脫，他所在的峭壁底下就是雅魯藏布江）

這次接近死亡的體驗，讓他體會很深：“使堅持一件事情更容易些，不容易被別的事情打斷，不容易走偏。”

回來后，他注冊了一家公司，世云多媒體。

2009~2011

本來，老孟一心想做的是視頻交互；但當他深入研究這門學問時，意識到其實文字、圖片、音頻、視頻等等，所有網頁里的東西都可以用來交互。

于是，他們把這個東西越做越底層，最后演變成了一個工具。他只用六個字形容那段時期：“根本停不下來”。

到2009年，云計算的概念進入人們視野。

這時，老孟意識到他和李斌搗弄了兩年的這個東西，其實可以走得更遠。基于互聯網提供專業的在線服務，可能是未來的發展趨勢。

老孟的目標是做一款具備長期價值的工具，像PS和Office一樣，成為很多人必不可少的幫手，而不是曇花一現的快消品。于是，他狠下心沒讓它面世，而是幾乎從頭開始研發，直到做出一套獨立的交互引擎。

這套引擎支持用Flash進行交互。當時，Flash是多媒體領域無人撼動的巨頭，風行二十年，只有喬布斯敢炮轟它封閉、有安全風險、耗能大。

但HTML5（第五代超文本標記語言）的出現引起了老孟的注意。他和喬布斯的想法一樣，預感到不適于移動端的Flash遲早會被淘汰，就把重心放在當時并不起眼的HTML5上。

誰知道到今天，谷歌、傲游、微軟、火狐等各大瀏覽器都不停地屏蔽Flash，向HTML5倒戈呢？

“我們走得早。”老孟回憶。

2012~2014

現在國內很多H5制作工具的底層架構，用的都是國外開源的引擎，iH5獨立研發的交互引擎在其中獨樹一幟，但過程是異常艱辛的。

2012年，iH5的底層引擎研發完畢，而老孟和李斌拿到了多屏拼接、多點觸摸、視頻交互等40多個相關的技術專利。

萬事俱備，只欠東風。

為了讓這套工具完全適應于網頁端，并給出一系列配套的東西（作品展示、工具使用文檔、教學視頻等等），他們又耗了兩年。

這時，一個叫《圍住神經貓》的H5在全國人民的微信里刷屏，H5開始火了。產品發布的時機成熟，這次老孟沒有猶豫，很快就把它推向市場。

歷經8年，VXPLO互動大師于2014年9月成功上線。開放注冊不到20天，便積累8000多名注冊用戶，而且留存率高達90%。

當時，iH5的名字是VXPLO互動大師，表示Video（視頻）＋Explorer（探索者）。

為了推廣產品，平時喜歡宅在家里的老孟開始頻頻露面：“我被小伙伴派出來，到處去演講、去參加比賽，除了沒讓拍電視劇，基本上能做的推廣我都做了。”

很快地，公司融到了第一筆正式的資金。

2015~2017

VXPLO上線后，老孟一刻也沒有停止研發步伐。

2015年9月，網站全面改版升級，化身為現在大家熟知的iH5，iH5.cn上線了。

新名字簡潔好記，而且加入社交元素。你只要點擊官網上的作者頭像，就可以和設計師實時聊天，瞬間連接起創作者與需求方，成為一個自給自足的生態系統。

時間軸、數據庫、變量、720°全景、橫幅、面板、圖片序列、GIF、重力感應、物理引擎……這些名詞很多人是在接觸iH5后才聽說的，但你可能不知道在這段期間，它又進入了第3版工具的研發。

歷經3年，新版工具基本研發完成。

用“驚艷”兩個字形容這款產品，一點也不夸張。

為了不劇透，這里不會和你具體說明新工具的革新之處。但可以告訴你的是：

你現在能做出非常復雜的游戲，比如泡泡龍、消消樂、斗地主、三國殺、賽車游戲等；能設計各種各樣的應用系統，比如聽歌軟件、購物軟件、論壇應用等等；退一步說，你還可以用它開發一個易企秀。

期待嗎？

現在你登錄iH5的官網，會發現騰訊、網易、萬達、廣汽、順豐等名企，也會看到新京報、澎湃新聞、芒果TV、南方報業、東方衛視等大牌媒體的身影，讓人感覺好像它一直那么熱鬧。

熱鬧到讓人差點不記得，已經過了10年。

下個星期，iH5 3.0全新上線，變得更好看、更好用、也更好玩。

10年是漫長的，長到可以花光一個人一生的信心與勇氣；

10年是飛快的，快到可以忘掉過程的乏味和難堪，只留下對熱情的追憶。

10年是值得的，只此一生。