整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
過去三年內(nèi)，這種編程語言的使用人數(shù)急劇增長。開發(fā)人員可以使用這種語言來創(chuàng)建各種改進(jìn)的內(nèi)容。隨著每一個(gè)新版本的發(fā)布，HTML通過更好的功能和技術(shù)漸漸占據(jù)了制高點(diǎn)。
HTML5也逐漸出現(xiàn)在企業(yè)們的視線中，以其便捷性，并且能夠提供多種功能。例如內(nèi)置的視覺元素，指定的結(jié)構(gòu)標(biāo)記，互動(dòng)的拖放功能等等。
開發(fā)人員可以利用這些功能來創(chuàng)建充滿吸引力的網(wǎng)站。此外，它還擁有現(xiàn)代瀏覽器，如Chrome，IE和Firefox的支持。
使用HTML5創(chuàng)建的動(dòng)畫可以使得網(wǎng)站更吸引用戶的眼球，從而達(dá)成更多的業(yè)務(wù)。
但是，創(chuàng)建動(dòng)畫是一個(gè)耗時(shí)且繁瑣的過程。（其實(shí)網(wǎng)絡(luò)上搜索出來的動(dòng)畫都花費(fèi)了HTML5前端工程師很多心血啊！所以不要再吐槽啦！）
為了簡化這個(gè)過程，現(xiàn)在的市場上有許多可用的HTML5動(dòng)畫工具。既有付費(fèi)的，也有免費(fèi)的，都可以幫助你為你的網(wǎng)站創(chuàng)造驚艷的動(dòng)畫。這里我們將列出其中一些必要的HTML5動(dòng)畫工具。
Animatron
使用直觀的Animatron編輯器來設(shè)計(jì)和發(fā)布動(dòng)畫和交互內(nèi)容，這些動(dòng)畫和交互內(nèi)容可應(yīng)用于從臺(tái)式機(jī)到移動(dòng)設(shè)備的每個(gè)地方。
Blysk
使用你曾經(jīng)在其他動(dòng)畫工具上的經(jīng)驗(yàn)，只要一秒鐘就可以開始使用Blysk工作——我們都不希望重新發(fā)明輪子，這是一個(gè)內(nèi)置于瀏覽器的優(yōu)秀工具。
Createjs
這是一個(gè)可以使得工作于HTML5 Canvas元素變得容易的JavaScript庫。對(duì)于創(chuàng)建游戲、生成藝術(shù)和其他高度圖形化的體驗(yàn)非常有用。
Hippo Studios
Hippani Animator是一款流行的HTML動(dòng)畫工作室。
它可以很容易制作可擴(kuò)展的交互式動(dòng)畫，復(fù)雜的游戲，視頻，演示，app和多媒體網(wǎng)站。比其他任何HTML5動(dòng)畫制作軟件能發(fā)布更多在網(wǎng)頁瀏覽器和設(shè)備上。
HTML5 Maker
HTML5MAKER Online Editor支持所有流行的文本過濾器，所以你不需要用Photoshop創(chuàng)建看起來酷的文本。
這里為你提供了大量的圖像集合，既可以用于你的項(xiàng)目，也可以改變屬性并創(chuàng)建一種驚艷的類似于照片分享的效果。
你可以創(chuàng)造出令人吃驚的轉(zhuǎn)換和緩沖的動(dòng)畫，當(dāng)然還有時(shí)間軸，它允許你完全控制你動(dòng)畫。
Mixeek
這是一款用來設(shè)計(jì)和運(yùn)行Web動(dòng)畫和交互的免費(fèi)應(yīng)用工具。它基于JavaScript，CSS3和HTML5，它有著輕量級(jí)、已使用的特點(diǎn)。
讓開發(fā)邊等更簡單一點(diǎn)，是Mixeek。
Mugeda
Mugeda致力于為富媒體內(nèi)容提供基于云的解決方案。
Mugeda平臺(tái)，一種在線的基于HTML5的技術(shù)，可用來打造專業(yè)的HTML5富媒體創(chuàng)意，這些創(chuàng)意可以被部署到如計(jì)算機(jī)，智能手機(jī)，平板電腦和智能電視這樣的智能設(shè)備。
總結(jié)
HTML5使得開發(fā)者能為你的網(wǎng)站創(chuàng)建出驚人的動(dòng)畫效果。
這些很棒的動(dòng)畫效果會(huì)為你的網(wǎng)站增添更多吸引力。
本文為大家列舉了幾個(gè)千鋒教育成都校區(qū)HTML5培訓(xùn)學(xué)員使用的動(dòng)畫工具，希望有幫助哦~
但是是不是很多學(xué)員看到了以上的工具卻不會(huì)使用呢？小白們，還不快加入我們千鋒教育的HTML5程序員大軍的隊(duì)伍？
5工具中，比較常聽到的是易企秀這種以APP為主的移動(dòng)展示工具。這種類型的H5工具，定位為手機(jī)PPT的在線展示，操作簡單，個(gè)人用戶較多。
但從功能豐富度和實(shí)用性角度，國內(nèi)屬于行業(yè)頂尖的是iH5和意派兩家，它們具有兩個(gè)共同的基本特征：
（1）提供HTML5頁面的可視化編輯器；
（2）通過電腦端網(wǎng)頁在線制作，能一鍵生成鏈接。
然而，兩者在本質(zhì)上有所差別，iH5偏向于底層交互，意派偏向于輕度營銷。這兩個(gè)區(qū)別表面看上去很簡單，背后有什么深意？
·
第1張圖：用戶的差別
類比圖像制作軟件，可以簡單地概括為：
iH5：H5界的Photoshop，以企業(yè)用戶為主；
意派：H5界的美圖秀秀，以個(gè)人用戶為主。
從上圖可以看出，使用iH5的設(shè)計(jì)師，主要接受不同規(guī)模公司的定制需求，但也有部分個(gè)人用戶。由于面向底層交互，iH5提供的功能都是基礎(chǔ)應(yīng)用類型的，基本替代了傳統(tǒng)上由專業(yè)程序員編寫HTML5代碼的工作，更受企業(yè)青睞。因此，使用該工具的設(shè)計(jì)師一般處于品牌推廣團(tuán)隊(duì)中，負(fù)責(zé)成品頁面的實(shí)現(xiàn)。
使用意派的設(shè)計(jì)師，大部分接受來自個(gè)人或小公司的制作需求，但也有部分企業(yè)用戶。這種面向輕營銷的H5工具，相當(dāng)于把PPT實(shí)現(xiàn)的功能通過在線網(wǎng)頁展示出來，交互思路以翻頁為主，更適用于個(gè)人用戶。但由于個(gè)人市場目前被易企秀這類更容易上手的APP所占領(lǐng)，意派所占份額實(shí)際比較有限。
·
第2-3張圖：功能的差別
H5頁面制作服務(wù)所需組件主要有四種類型：
（1）多媒體：iH5比意派多6個(gè)功能；
（2）容器：iH5比意派多6個(gè)功能；
（3）數(shù)據(jù)應(yīng)用：iH5比意派多7個(gè)功能；
（4）特效：iH5比意派多8個(gè)功能.
在上圖中，標(biāo)示Epub 360的四個(gè)彩色區(qū)域表示意派和iH5重疊的組件服務(wù)，灰色區(qū)域表示iH5獨(dú)有的組件。
意派在多媒體方面提供的服務(wù)與iH5比較接近，但在容器、數(shù)據(jù)應(yīng)用和特效三個(gè)方面都不及iH5的二分之一。如果只計(jì)算意派不具有的組件服務(wù)，iH5比意派多27個(gè)組件，但由于兩種工具部分組件存在交叉現(xiàn)象，從總量上看相差20個(gè)。
為什么會(huì)產(chǎn)生這樣的差距？
·
第4張圖：性能的差別
在iH5獨(dú)有的組件中，具有決定性作用的是“萬金油”式的事件（組），能通過邏輯判斷為其他組件拓展出無限種可能：
手指按住屏幕的時(shí)間長短；
手勢(shì)擦除面積的大小；
微信錄音的開始或結(jié)束；
數(shù)據(jù)提交次數(shù)是否超限。
上圖是iH5在視頻組件下添加一個(gè)事件時(shí)，配套的18種觸發(fā)條件，表示能為視頻做18種邏輯判斷。
是否使用事件機(jī)制，對(duì)工具性能有很大影響——
（1）通過事件，iH5的設(shè)計(jì)師能對(duì)交互行為進(jìn)行邏輯判斷，并設(shè)計(jì)各種各樣的反饋動(dòng)作，比如設(shè)置視頻播放到某一時(shí)刻時(shí)彈出廣告。因此，用戶能利用事件的組合，規(guī)定成千上萬種“如果……就……”的反應(yīng)情形。
（2）沒有事件，所有的組件都是割裂的，比如視頻的播放只能局限在視頻組件內(nèi)部進(jìn)行控制。這也導(dǎo)致意派有很多組件存在重復(fù)功能，因?yàn)槊總€(gè)組件的反饋機(jī)制基本是獨(dú)立的。
在事件的幫助下，設(shè)計(jì)師可以實(shí)現(xiàn)很多傳統(tǒng)上必須程序員介入才能完成的交互邏輯。既然事件那么重要，為什么國內(nèi)H5工具中只有iH5使用事件機(jī)制？
·
第5張圖：結(jié)構(gòu)的差別
實(shí)際上，iH5和意派的差別取決于工具結(jié)構(gòu)上的差異：
iH5：使用“對(duì)象樹”管理資源，頁面作為眾多資源的一種；
意派：使用頁面布局，主要提供基于頁面的翻頁交互。
下圖為兩個(gè)工具的編輯界面。
iH5以交互作為出發(fā)點(diǎn)，采用DOM（文檔對(duì)象模型）結(jié)構(gòu)，提供的組件基本是對(duì)象類型的，諸如屏幕、時(shí)間軸、數(shù)據(jù)庫等。因此，用戶能通過“對(duì)象樹”對(duì)不同類型的組件進(jìn)行管理，這也是事件機(jī)制可行的基礎(chǔ)。
意派則以模板作為出發(fā)點(diǎn)，采用頁面結(jié)構(gòu)，提供的組件基本是模塊類型的，諸如相冊(cè)、計(jì)時(shí)器等。實(shí)際上，這種工具相當(dāng)于收集不同類型HTML5網(wǎng)頁模板的源碼，把它們拆解成不同模塊，再分別開發(fā)成套件。因此，用戶只能在預(yù)設(shè)格式的套件內(nèi)調(diào)整內(nèi)容，拓展性較低。
·
第6張圖：成本的差別
從費(fèi)用上來看，兩種工具的使用成本也有所差異：
iH5：所有組件的使用均免費(fèi)，對(duì)4種服務(wù)按需收費(fèi)；
意派：7個(gè)組件的使用需要付費(fèi)，對(duì)12種服務(wù)收取年費(fèi)。
意派將賬號(hào)分為體驗(yàn)版、基礎(chǔ)版、專業(yè)版、企業(yè)版和企業(yè)增強(qiáng)版五種類型，在作品創(chuàng)建數(shù)量、存儲(chǔ)空間、表單、數(shù)據(jù)應(yīng)用等基礎(chǔ)功能上均有限制，并對(duì)加載LOGO等服務(wù)進(jìn)行收費(fèi)，年費(fèi)最高達(dá)59999元。
iH5對(duì)自定義微信授權(quán)、自定義LOGO加載、調(diào)用第三方JS函數(shù)和作品嵌入第三方網(wǎng)站四種主要用于企業(yè)的服務(wù)進(jìn)行收費(fèi)，其中微信授權(quán)費(fèi)用為1元/月，所有增值服務(wù)按年計(jì)最高為12012元，為意派的五分之一。
·
雖然iH5和意派均提供基于云端的可視化編輯服務(wù)，但通過用戶、功能、性能、結(jié)構(gòu)、和成本五個(gè)方面的對(duì)比，可以看出兩者還是存在很大區(qū)別。
簡單地說，意派屬于輕度營銷類H5工具，是通過利用HTML5的跨平臺(tái)特性，把傳統(tǒng)的離線PPT轉(zhuǎn)換為在線展示；而iH5是以交互為思路的基礎(chǔ)工具，能最大程度地取代程序員在網(wǎng)頁設(shè)計(jì)中的角色。
的一生，能有多少個(gè)10年？
幾歲，有些懵、有些懂；
10多歲，以為整個(gè)世界很快都是自己的；
20多歲，才知道自己一直在為別人活著；
30多歲，“理想”兩個(gè)字，可以變得很輕，也可以變得很重。
如果你愿意停下來，留出不到3分鐘的時(shí)間，可以聽聽這個(gè)人最近10年是怎么過來的——他是iH5的創(chuàng)始人孟智平，大家叫他老孟。
——“反正你也不是第一次創(chuàng)業(yè)了。”
對(duì)面的人篤定地說。
——“這是我第一次創(chuàng)業(yè)。”
老孟平靜地應(yīng)答，空氣揚(yáng)起一陣干笑聲。
同樣30多歲、在數(shù)字營銷界小有名氣的李三水，已經(jīng)混遍中藥廠、書店、飯店、時(shí)裝店、瑜伽館、淘寶店等各行各業(yè)，W甚至是他進(jìn)的第四家廣告公司了。
而這個(gè)被大家親切地稱作“老孟”的人，卻把一門心思都放在iH5——這個(gè)他醞釀了整整10年的產(chǎn)品上。從他決定要做這樣的一件事，到他從瑞典辭職歸國，再到他在北京、上海、廣州、深圳立下根據(jù)地，一路沒有回頭。
距離iH5第三版的公布，還有不到5天。
這三個(gè)版本，可以理解成Windows 98、Windows XP和Win 10的區(qū)別。微軟系統(tǒng)的更新迭代，是個(gè)人計(jì)算機(jī)一步步搶占全球市場的體現(xiàn)；而iH5的更新迭代，又和HTML5網(wǎng)頁在互聯(lián)網(wǎng)的奮斗史并駕齊驅(qū)。
但中間也會(huì)經(jīng)歷各種被質(zhì)疑、再洗牌、離離合合的波折。
那是國內(nèi)互聯(lián)網(wǎng)剛興起視頻熱的時(shí)候，優(yōu)酷、土豆、酷6還在萌芽，百度、騰訊還沒進(jìn)軍視頻市場，也沒有H5這個(gè)說法。對(duì)大部分人來說，能在網(wǎng)上看視頻就很稀奇了。
一次，老孟看到視頻里的女孩提著個(gè)漂亮的包，就想：它是什么牌子？多少錢？在哪里能買得到？
現(xiàn)在我們知道iH5可以快速生成這樣的交互視頻，你用鼠標(biāo)一點(diǎn)手提包，就能彈出商品介紹。但當(dāng)時(shí)沒人給他答案，他只能自己死命鉆研。
你肯定想象不到，這時(shí)的老孟在國外過著早上10點(diǎn)上班，下午4點(diǎn)下班的生活——他閑著沒事還可以去湖邊釣魚。
那是2006年，他是瑞典愛立信的項(xiàng)目負(fù)責(zé)人，衣食無憂、有娛有樂。而同樣是這一年，他申請(qǐng)到第1個(gè)視頻交互的專利。
1年后，他辭了職。在3年前一場演講中，他解釋原因：
“過早地步入了晚年生活，我不甘心這樣。”
“我辭職了。”這天，李斌接到一通越洋電話，掛下電話后一直難以平靜。
電話是老孟打過來的，當(dāng)老孟決定回國實(shí)現(xiàn)自己的想法時(shí)，第一時(shí)間想到的就是拉這個(gè)大學(xué)時(shí)期的舍友入伙——
數(shù)理物化生全才，小學(xué)完成高數(shù)、微積分等大學(xué)課程，高中參加Linux系統(tǒng)的開源工作，大學(xué)就帶領(lǐng)國際團(tuán)隊(duì)開發(fā)Linux。
李斌當(dāng)場同意。
于是，兩人開始在上海落腳，很快研究出視頻交互的技術(shù)方案。但因?yàn)橄敕ㄌ埃芏嘁曨l網(wǎng)站并不理解這種新興概念，融資極為困難。
只消半年，他們就把自己的積蓄花完了。
2007年，老孟去了趟西藏，在墨脫無人區(qū)徒步穿行。這是一個(gè)被很多驢友稱為“鬼都不去的地方”，有世界第一深的大峽谷、全球最北的熱帶森林、還有雪山泥沼，最缺的就是人。
（老孟在墨脫，他所在的峭壁底下就是雅魯藏布江）
這次接近死亡的體驗(yàn)，讓他體會(huì)很深：“使堅(jiān)持一件事情更容易些，不容易被別的事情打斷，不容易走偏。”
回來后，他注冊(cè)了一家公司，世云多媒體。
本來，老孟一心想做的是視頻交互；但當(dāng)他深入研究這門學(xué)問時(shí)，意識(shí)到其實(shí)文字、圖片、音頻、視頻等等，所有網(wǎng)頁里的東西都可以用來交互。
于是，他們把這個(gè)東西越做越底層，最后演變成了一個(gè)工具。他只用六個(gè)字形容那段時(shí)期：“根本停不下來”。
到2009年，云計(jì)算的概念進(jìn)入人們視野。
這時(shí)，老孟意識(shí)到他和李斌搗弄了兩年的這個(gè)東西，其實(shí)可以走得更遠(yuǎn)。基于互聯(lián)網(wǎng)提供專業(yè)的在線服務(wù)，可能是未來的發(fā)展趨勢(shì)。
老孟的目標(biāo)是做一款具備長期價(jià)值的工具，像PS和Office一樣，成為很多人必不可少的幫手，而不是曇花一現(xiàn)的快消品。于是，他狠下心沒讓它面世，而是幾乎從頭開始研發(fā)，直到做出一套獨(dú)立的交互引擎。
這套引擎支持用Flash進(jìn)行交互。當(dāng)時(shí)，F(xiàn)lash是多媒體領(lǐng)域無人撼動(dòng)的巨頭，風(fēng)行二十年，只有喬布斯敢炮轟它封閉、有安全風(fēng)險(xiǎn)、耗能大。
但HTML5（第五代超文本標(biāo)記語言）的出現(xiàn)引起了老孟的注意。他和喬布斯的想法一樣，預(yù)感到不適于移動(dòng)端的Flash遲早會(huì)被淘汰，就把重心放在當(dāng)時(shí)并不起眼的HTML5上。
誰知道到今天，谷歌、傲游、微軟、火狐等各大瀏覽器都不停地屏蔽Flash，向HTML5倒戈呢？
“我們走得早。”老孟回憶。
現(xiàn)在國內(nèi)很多H5制作工具的底層架構(gòu)，用的都是國外開源的引擎，iH5獨(dú)立研發(fā)的交互引擎在其中獨(dú)樹一幟，但過程是異常艱辛的。
2012年，iH5的底層引擎研發(fā)完畢，而老孟和李斌拿到了多屏拼接、多點(diǎn)觸摸、視頻交互等40多個(gè)相關(guān)的技術(shù)專利。
萬事俱備，只欠東風(fēng)。
為了讓這套工具完全適應(yīng)于網(wǎng)頁端，并給出一系列配套的東西（作品展示、工具使用文檔、教學(xué)視頻等等），他們又耗了兩年。
這時(shí)，一個(gè)叫《圍住神經(jīng)貓》的H5在全國人民的微信里刷屏，H5開始火了。產(chǎn)品發(fā)布的時(shí)機(jī)成熟，這次老孟沒有猶豫，很快就把它推向市場。
歷經(jīng)8年，VXPLO互動(dòng)大師于2014年9月成功上線。開放注冊(cè)不到20天，便積累8000多名注冊(cè)用戶，而且留存率高達(dá)90%。
當(dāng)時(shí)，iH5的名字是VXPLO互動(dòng)大師，表示Video（視頻）＋Explorer（探索者）。
為了推廣產(chǎn)品，平時(shí)喜歡宅在家里的老孟開始頻頻露面：“我被小伙伴派出來，到處去演講、去參加比賽，除了沒讓拍電視劇，基本上能做的推廣我都做了。”
很快地，公司融到了第一筆正式的資金。
VXPLO上線后，老孟一刻也沒有停止研發(fā)步伐。
2015年9月，網(wǎng)站全面改版升級(jí)，化身為現(xiàn)在大家熟知的iH5，iH5.cn上線了。
新名字簡潔好記，而且加入社交元素。你只要點(diǎn)擊官網(wǎng)上的作者頭像，就可以和設(shè)計(jì)師實(shí)時(shí)聊天，瞬間連接起創(chuàng)作者與需求方，成為一個(gè)自給自足的生態(tài)系統(tǒng)。
時(shí)間軸、數(shù)據(jù)庫、變量、720°全景、橫幅、面板、圖片序列、GIF、重力感應(yīng)、物理引擎……這些名詞很多人是在接觸iH5后才聽說的，但你可能不知道在這段期間，它又進(jìn)入了第3版工具的研發(fā)。
歷經(jīng)3年，新版工具基本研發(fā)完成。
用“驚艷”兩個(gè)字形容這款產(chǎn)品，一點(diǎn)也不夸張。
為了不劇透，這里不會(huì)和你具體說明新工具的革新之處。但可以告訴你的是：
你現(xiàn)在能做出非常復(fù)雜的游戲，比如泡泡龍、消消樂、斗地主、三國殺、賽車游戲等；能設(shè)計(jì)各種各樣的應(yīng)用系統(tǒng)，比如聽歌軟件、購物軟件、論壇應(yīng)用等等；退一步說，你還可以用它開發(fā)一個(gè)易企秀。
期待嗎？
現(xiàn)在你登錄iH5的官網(wǎng)，會(huì)發(fā)現(xiàn)騰訊、網(wǎng)易、萬達(dá)、廣汽、順豐等名企，也會(huì)看到新京報(bào)、澎湃新聞、芒果TV、南方報(bào)業(yè)、東方衛(wèi)視等大牌媒體的身影，讓人感覺好像它一直那么熱鬧。
熱鬧到讓人差點(diǎn)不記得，已經(jīng)過了10年。
下個(gè)星期，iH5 3.0全新上線，變得更好看、更好用、也更好玩。
10年是漫長的，長到可以花光一個(gè)人一生的信心與勇氣；
10年是飛快的，快到可以忘掉過程的乏味和難堪，只留下對(duì)熱情的追憶。
10年是值得的，只此一生。
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
