在市面上有一大批H5頁(yè)面模板制作工具，誠(chéng)然，他們方便了很多非專業(yè)設(shè)計(jì)師設(shè)計(jì)制作H5頁(yè)面。但是不得不吐槽的是，很多模板工具平臺(tái)上的作品大部分還停留在左飛入右飛出的初級(jí)境界，看多了真心有些膩，動(dòng)效如無(wú)美感還不如看靜態(tài)的。 那H5里有哪些高級(jí)動(dòng)效了？小派幾乎仔細(xì)體驗(yàn)了國(guó)內(nèi)所有優(yōu)秀H5頁(yè)面作品，結(jié)合自己的一些理解，整理出下面十大H5頁(yè)面特效。我們的H5作品如果能用上其中一兩個(gè)，相信能增色不少！術(shù)語(yǔ)也許不夠?qū)I(yè)，歡迎吐槽！
先說(shuō)說(shuō)展示方面的動(dòng)畫(huà)特效！
1. 粒子特效
星際傳奇：這是探索宇宙的門票 移動(dòng)網(wǎng)站 百度百科：為模擬現(xiàn)實(shí)中的水、火、霧、氣等效果由各種三維軟件開(kāi)發(fā)的制作模塊，原理是將無(wú)數(shù)的單個(gè)粒子組合使其呈現(xiàn)出固定形態(tài)，借由控制器，腳本來(lái)控制其整體或單個(gè)的運(yùn)動(dòng)，模擬出現(xiàn)真實(shí)的效果。 如上作品，那些粒子流和小火花，就屬于粒子特效，很有真實(shí)感。
2. SVG路徑動(dòng)畫(huà)
元小望：SVG練習(xí)NO.1_描述孤獨(dú) 簡(jiǎn)而言之，就是讓SVG的描邊像是有人繪制一樣的動(dòng)畫(huà)效果。動(dòng)畫(huà)輕巧不失真，特別適合那些崇尚簡(jiǎn)約設(shè)計(jì)風(fēng)格的網(wǎng)頁(yè)。 上作品是派友（Epub360用戶）元小望用Epub360設(shè)計(jì)制作的，大家感受下，是不是很酷！
3. 序列幀動(dòng)畫(huà)
百度百科：序列幀動(dòng)畫(huà)是只在時(shí)間軸的每幀上逐幀繪制不同的內(nèi)容，使其連續(xù)播放而成動(dòng)畫(huà)。 因?yàn)橹饚瑒?dòng)畫(huà)的幀序列內(nèi)容不一樣，不但給制作增加了負(fù)擔(dān)而且最終輸出的文件量也很大，但它的優(yōu)勢(shì)也很明顯：逐幀動(dòng)畫(huà)具有非常大的靈活性，幾乎可以表現(xiàn)任何想表現(xiàn)的內(nèi)容，而它類似與電影的播放模式，很適合于表演細(xì)膩的動(dòng)畫(huà)。例如：人物或動(dòng)物急劇轉(zhuǎn)身、頭發(fā)及衣服的飄動(dòng)、走路、說(shuō)話以及精致的3D效果等等。 派友晗蕭模仿原版用Epub360制作了“我們之間只有一個(gè)字”的優(yōu)化版，大家看看Epub360序列幀組件性能如何？
4. 全線性動(dòng)畫(huà)
騰訊UP大會(huì)：生命之下，想象之上 全線性動(dòng)畫(huà)可以理解為動(dòng)畫(huà)連續(xù)，幾乎不間斷播放，像視頻一樣流暢細(xì)膩。 這支H5打破了傳統(tǒng)幻燈片式的呈現(xiàn)方式，塑造出了一種寬廣、素雅、幽靜的整體感受，該作品也被很多人推崇為H5里的動(dòng)畫(huà)片。
5. Cinemagraphic
Levi's: “換”醒你的夏天 國(guó)內(nèi)首個(gè)Cinemagraphic互動(dòng)廣告 什么是Cinemegraphic？如果你不知道，就有點(diǎn)OUT了。顧名思義，Cinema是電影攝影，Graph是圖片，Cinemagraphic是一項(xiàng)將神奇的局部運(yùn)動(dòng)賦予靜態(tài)照片的新技術(shù)。 其中Cinemagraphic的應(yīng)用恰到好處地了詮釋了“自然風(fēng)”的概念，只見(jiàn)畫(huà)面上，人物的頭發(fā)和衣角飛舞著，仿佛吹拂著一陣陣自然風(fēng)，在炎炎夏日，他們依舊感受著清爽，盡情玩耍。作為互動(dòng)者的人們，當(dāng)看到畫(huà)面上被風(fēng)拂過(guò)的Cinemagraphic動(dòng)態(tài)場(chǎng)景，他們也身臨其境地感受到自然風(fēng)所能帶來(lái)的這種清爽感受。
下面說(shuō)說(shuō)和交互相關(guān)的動(dòng)畫(huà)特效。
6. 全景
杜蕾斯的第一座美術(shù)館 移動(dòng)網(wǎng)站 虛擬全景美術(shù)館的概念并不新鮮。其鼻祖應(yīng)該是 Google 的 Art Project，讓你能夠在線瀏覽全世界大多數(shù)博物館和美術(shù)館。杜蕾斯“美術(shù)館”的創(chuàng)新，在于它其實(shí)是熱門廣告形式H5頁(yè)面的偽裝�！拔覀兿胍ㄟ^(guò)多重手段（比如館內(nèi)的彩蛋、12 點(diǎn)閉館無(wú)法訪問(wèn)等等）來(lái)創(chuàng)造一個(gè)虛擬的真實(shí)空間，而不是傳統(tǒng)H5的單線程教育的邏輯。” Socialab 杜蕾斯組的負(fù)責(zé)人說(shuō)，“液體主義群展將是杜蕾斯美術(shù)館無(wú)數(shù)展覽中的第一個(gè)。”
7. 3D
康師傅：2015最飛羊的新春祝愿 祝福燈籠可以360旋轉(zhuǎn)呈現(xiàn)，而且具有夜空繁星中題字燈籠飛來(lái)飛去的3D炫目效果，彰顯“最飛羊的新春祝愿”。其中意趣和精妙所在，恐非文字所能表述。
8. 點(diǎn)擊碎屏
大眾點(diǎn)評(píng)：這個(gè)陌生來(lái)電你敢接嗎？ 移動(dòng)網(wǎng)站 “點(diǎn)擊屏幕”不新鮮，但是這種屏幕擊碎的畫(huà)面好像也特別討人喜歡，大概有三輪左右的“擊碎”動(dòng)作，這是整個(gè)H5的互動(dòng)高峰。發(fā)現(xiàn)這種“屏幕敲擊”的常規(guī)動(dòng)作特別有慣性，點(diǎn)一點(diǎn)就停不下來(lái)。是不是抓住了手機(jī)族的某些“強(qiáng)迫癥”特點(diǎn)。
9. 長(zhǎng)按逐字
韓寒再談一加：1步1步看清韓寒 移動(dòng)網(wǎng)站 整個(gè)H5頁(yè)面用打字機(jī)的形式呈現(xiàn)，隨著用戶按下按鈕，紙片會(huì)逐漸顯示出韓寒從1999年起，為人熟知或不知的成長(zhǎng)軌跡。觸發(fā)逐字等動(dòng)效很有真實(shí)感。
10.滑動(dòng)觸發(fā)
騰訊視頻：這一幕你期待已久 移動(dòng)網(wǎng)站 長(zhǎng)頁(yè)H5，滑動(dòng)觸發(fā)動(dòng)效，和呆板的幻燈片式樣的H5拉開(kāi)了距離。Epub360雖然能實(shí)現(xiàn)帶動(dòng)效帶觸發(fā)的長(zhǎng)頁(yè)，但是目前暫時(shí)還不能實(shí)現(xiàn)這種滑動(dòng)觸發(fā)動(dòng)畫(huà)。
