過去三年內,這種編程語言的使用人數急劇增長。開發人員可以使用這種語言來創建各種改進的內容。隨著每一個新版本的發布,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的創始人孟智平,大家叫他老孟。
——“反正你也不是第一次創業了。”
對面的人篤定地說。
——“這是我第一次創業。”
老孟平靜地應答,空氣揚起一陣干笑聲。
同樣30多歲、在數字營銷界小有名氣的李三水,已經混遍中藥廠、書店、飯店、時裝店、瑜伽館、淘寶店等各行各業,W甚至是他進的第四家廣告公司了。
而這個被大家親切地稱作“老孟”的人,卻把一門心思都放在iH5——這個他醞釀了整整10年的產品上。從他決定要做這樣的一件事,到他從瑞典辭職歸國,再到他在北京、上海、廣州、深圳立下根據地,一路沒有回頭。
距離iH5第三版的公布,還有不到5天。
這三個版本,可以理解成Windows 98、Windows XP和Win 10的區別。微軟系統的更新迭代,是個人計算機一步步搶占全球市場的體現;而iH5的更新迭代,又和HTML5網頁在互聯網的奮斗史并駕齊驅。
但中間也會經歷各種被質疑、再洗牌、離離合合的波折。
那是國內互聯網剛興起視頻熱的時候,優酷、土豆、酷6還在萌芽,百度、騰訊還沒進軍視頻市場,也沒有H5這個說法。對大部分人來說,能在網上看視頻就很稀奇了。
一次,老孟看到視頻里的女孩提著個漂亮的包,就想:它是什么牌子?多少錢?在哪里能買得到?
現在我們知道iH5可以快速生成這樣的交互視頻,你用鼠標一點手提包,就能彈出商品介紹。但當時沒人給他答案,他只能自己死命鉆研。
你肯定想象不到,這時的老孟在國外過著早上10點上班,下午4點下班的生活——他閑著沒事還可以去湖邊釣魚。
那是2006年,他是瑞典愛立信的項目負責人,衣食無憂、有娛有樂。而同樣是這一年,他申請到第1個視頻交互的專利。
1年后,他辭了職。在3年前一場演講中,他解釋原因:
“過早地步入了晚年生活,我不甘心這樣。”
“我辭職了。”這天,李斌接到一通越洋電話,掛下電話后一直難以平靜。
電話是老孟打過來的,當老孟決定回國實現自己的想法時,第一時間想到的就是拉這個大學時期的舍友入伙——
數理物化生全才,小學完成高數、微積分等大學課程,高中參加Linux系統的開源工作,大學就帶領國際團隊開發Linux。
李斌當場同意。
于是,兩人開始在上海落腳,很快研究出視頻交互的技術方案。但因為想法太超前,很多視頻網站并不理解這種新興概念,融資極為困難。
只消半年,他們就把自己的積蓄花完了。
2007年,老孟去了趟西藏,在墨脫無人區徒步穿行。這是一個被很多驢友稱為“鬼都不去的地方”,有世界第一深的大峽谷、全球最北的熱帶森林、還有雪山泥沼,最缺的就是人。
(老孟在墨脫,他所在的峭壁底下就是雅魯藏布江)
這次接近死亡的體驗,讓他體會很深:“使堅持一件事情更容易些,不容易被別的事情打斷,不容易走偏。”
回來后,他注冊了一家公司,世云多媒體。
本來,老孟一心想做的是視頻交互;但當他深入研究這門學問時,意識到其實文字、圖片、音頻、視頻等等,所有網頁里的東西都可以用來交互。
于是,他們把這個東西越做越底層,最后演變成了一個工具。他只用六個字形容那段時期:“根本停不下來”。
到2009年,云計算的概念進入人們視野。
這時,老孟意識到他和李斌搗弄了兩年的這個東西,其實可以走得更遠。基于互聯網提供專業的在線服務,可能是未來的發展趨勢。
老孟的目標是做一款具備長期價值的工具,像PS和Office一樣,成為很多人必不可少的幫手,而不是曇花一現的快消品。于是,他狠下心沒讓它面世,而是幾乎從頭開始研發,直到做出一套獨立的交互引擎。
這套引擎支持用Flash進行交互。當時,Flash是多媒體領域無人撼動的巨頭,風行二十年,只有喬布斯敢炮轟它封閉、有安全風險、耗能大。
但HTML5(第五代超文本標記語言)的出現引起了老孟的注意。他和喬布斯的想法一樣,預感到不適于移動端的Flash遲早會被淘汰,就把重心放在當時并不起眼的HTML5上。
誰知道到今天,谷歌、傲游、微軟、火狐等各大瀏覽器都不停地屏蔽Flash,向HTML5倒戈呢?
“我們走得早。”老孟回憶。
現在國內很多H5制作工具的底層架構,用的都是國外開源的引擎,iH5獨立研發的交互引擎在其中獨樹一幟,但過程是異常艱辛的。
2012年,iH5的底層引擎研發完畢,而老孟和李斌拿到了多屏拼接、多點觸摸、視頻交互等40多個相關的技術專利。
萬事俱備,只欠東風。
為了讓這套工具完全適應于網頁端,并給出一系列配套的東西(作品展示、工具使用文檔、教學視頻等等),他們又耗了兩年。
這時,一個叫《圍住神經貓》的H5在全國人民的微信里刷屏,H5開始火了。產品發布的時機成熟,這次老孟沒有猶豫,很快就把它推向市場。
歷經8年,VXPLO互動大師于2014年9月成功上線。開放注冊不到20天,便積累8000多名注冊用戶,而且留存率高達90%。
當時,iH5的名字是VXPLO互動大師,表示Video(視頻)+Explorer(探索者)。
為了推廣產品,平時喜歡宅在家里的老孟開始頻頻露面:“我被小伙伴派出來,到處去演講、去參加比賽,除了沒讓拍電視劇,基本上能做的推廣我都做了。”
很快地,公司融到了第一筆正式的資金。
VXPLO上線后,老孟一刻也沒有停止研發步伐。
2015年9月,網站全面改版升級,化身為現在大家熟知的iH5,iH5.cn上線了。
新名字簡潔好記,而且加入社交元素。你只要點擊官網上的作者頭像,就可以和設計師實時聊天,瞬間連接起創作者與需求方,成為一個自給自足的生態系統。
時間軸、數據庫、變量、720°全景、橫幅、面板、圖片序列、GIF、重力感應、物理引擎……這些名詞很多人是在接觸iH5后才聽說的,但你可能不知道在這段期間,它又進入了第3版工具的研發。
歷經3年,新版工具基本研發完成。
用“驚艷”兩個字形容這款產品,一點也不夸張。
為了不劇透,這里不會和你具體說明新工具的革新之處。但可以告訴你的是:
你現在能做出非常復雜的游戲,比如泡泡龍、消消樂、斗地主、三國殺、賽車游戲等;能設計各種各樣的應用系統,比如聽歌軟件、購物軟件、論壇應用等等;退一步說,你還可以用它開發一個易企秀。
期待嗎?
現在你登錄iH5的官網,會發現騰訊、網易、萬達、廣汽、順豐等名企,也會看到新京報、澎湃新聞、芒果TV、南方報業、東方衛視等大牌媒體的身影,讓人感覺好像它一直那么熱鬧。
熱鬧到讓人差點不記得,已經過了10年。
下個星期,iH5 3.0全新上線,變得更好看、更好用、也更好玩。
10年是漫長的,長到可以花光一個人一生的信心與勇氣;
10年是飛快的,快到可以忘掉過程的乏味和難堪,只留下對熱情的追憶。
10年是值得的,只此一生。
*請認真填寫需求信息,我們會在24小時內與您取得聯系。