效果就是兩個(gè)元素分(fēn)别從上(shàng)面掉下來，這裏有(yǒu)個(gè)小(xiǎo)細節（keyframes），爲了讓掉下來的(de)動畫生動點，應該是在90%的(de)時候先掉下一點點，然後瞬間在100%時回跳5px。

還有(yǒu)個(gè)細節，安卓2.3.*不能(néng)良好支持-webkit-animation-fill-mode，也(yě)就是漸變動畫不能(néng)停止在最後一幀。有(yǒu)這樣一個(gè)解決方案：

1.用(yòng)Modernizr去檢測是否支持這個(gè)屬性，加上(shàng)識别類.no-animation-fill-mode；

2.根據識别類采取以下措施：
（1）用(yòng)js模拟同樣效果；
（2）用(yòng)css屏蔽掉動畫；
（3）或者直接全部都(dōu)用(yòng)transition來做（不要keyframes）。

示例頁面如(rú)下（查看DEMO）：

（2） CSS3細節強調動畫

一些局部細節如(rú)果還是漸現顯示，會(huì)枯燥沒什(shén)麽感覺，例如(rú)标題、按鈕等，需要一種強調。

 

分(fēn)兩種情況：

1.如(rú)果時間允許的(de)話(huà)，基本做法是先把一個(gè)元素切成不同的(de)塊狀，例如(rú)小(xiǎo)人(rén)的(de)手腳都(dōu)切成不同圖片，然後讓它們重新組合，再通過賦予不同的(de)CSS動畫來讓它生動起來，這裏引用(yòng)個(gè)webank的(de)例子：

  

（查看DEMO）

 

2.如(rú)果時間緊湊，又(yòu)不像桑尼一樣擅長于動畫細節，可(kě)以使用(yòng)一些輔助工(gōng)具：

Animate.css，通過直接預覽選擇想要的(de)動效，然後下載它的(de)CSS把對應的(de)keyframe扒下來就好了（引用(yòng)整個(gè)CSS是資源浪費）。

 

（3）SVG動畫

SVG技術(shù)越來越不陌生，使用(yòng)門檻也(yě)漸漸降低，而且SVG動畫還可(kě)以使用(yòng)CSS控制(zhì)。

先看個(gè)生日頁面，是個(gè)SVG的(de)蛋糕：

  

（查看DEMO）

 

可(kě)見SVG是很強大(dà)的(de)！彌補了CSS3的(de)不足。

然而這種動畫也(yě)是略耗時，但(dàn)有(yǒu)一種比較常用(yòng)的(de)，就是線條的(de)描繪動畫，CSS3比較難實現，這裏可(kě)以用(yòng)SVG，看圖：

 

介紹一個(gè)PS插件(jiàn)svgArtisan（目前還未有(yǒu)主頁），這個(gè)工(gōng)具可(kě)以直接根據PSD的(de)路(lù)徑圖層生成SVG圖形。

接下來就簡單了，将設計(jì)稿上(shàng)的(de)路(lù)徑圖形用(yòng)插件(jiàn)生成對應的(de)SVG，例如(rú)是這樣的(de)：

（注意，其中的(de)foreignObject标簽内是不支持svg的(de)浏覽器(qì)會(huì)看到(dào)一張.m3-svg-nosupport标簽下的(de)圖片。）

再使用(yòng)CSS3的(de)animation控制(zhì)stroke-dashoffset：

效果不難吧(ba)！SVG還有(yǒu)各種用(yòng)途，例如(rú)制(zhì)作ICONFONT等，可(kě)以深入挖掘。

（4） 重力陀螺儀

想讓頁面更有(yǒu)層次感，不妨讓設計(jì)提供一些碎片元素，例如(rú)彩花，星星之類，然後把它們單獨切出來放(fàng)畫面前景，使用(yòng)陀螺儀伴随著(zhe)手機運動碎片也(yě)跟著(zhe)運動，多麽好玩！

這裏提供一個(gè)工(gōng)具可(kě)以輕松實現陀螺儀重力效果的(de)：parallax.js

用(yòng)法簡單，定義一個(gè)parallax-obj的(de)父類，把需要動的(de)元素加上(shàng)layer的(de)類，然後設置動的(de)範圍data-depth：

 

（5） 背景音(yīn)樂(yuè)&音(yīn)效

H5頁面要炫酷，畫面生動還是不夠的(de)，一定要配合生動的(de)音(yīn)樂(yuè)。因此可(kě)以主動跟設計(jì)或産品溝通，讓他(tā)們可(kě)以提供音(yīn)樂(yuè)資源，分(fēn)分(fēn)鍾導緻UV猛漲有(yǒu)木有(yǒu)！

 

當然，有(yǒu)了音(yīn)樂(yuè)，前端也(yě)不是直接引用(yòng)的(de)，還是有(yǒu)點要求：

1.音(yīn)樂(yuè)不宜過長，30s爲佳，而且音(yīn)樂(yuè)要加上(shàng)漸現漸隐效果，方便循環播放(fàng)；

2.音(yīn)樂(yuè)體積要小(xiǎo)，音(yīn)質和(hé)流量，在手機上(shàng)還是優先考慮流量吧(ba)。

一般背景音(yīn)樂(yuè)體積可(kě)以接受的(de)範圍是200K以下，若太大(dà)，可(kě)以使用(yòng)格式工(gōng)廠(chǎng)等軟件(jiàn)，降低它的(de)比特率和(hé)聲道來改變體積。

 

接著(zhe)，隻需要簡單引用(yòng)：

這裏有(yǒu)個(gè)問題，IOS是不能(néng)自動播放(fàng)音(yīn)樂(yuè)的(de)，一定要觸發一個(gè)用(yòng)戶交互事件(jiàn)，例如(rú)點擊。

但(dàn)是有(yǒu)一種hack的(de)方法可(kě)以讓IOS微信側頁面自動播放(fàng)（SAFARI依舊無效）：

通過new一張圖片，監聽一張圖片的(de)onload事件(jiàn)，結束後回調執行(xíng)音(yīn)頻播放(fàng)audio.play()即可(kě)，原理(lǐ)估計(jì)是動了dom結構，相(xiàng)當于執行(xíng)了一次交互。（有(yǒu)人(rén)也(yě)用(yòng)過createEvent模拟，原理(lǐ)也(yě)是動了dom。）

因此，記得暴露一個(gè)音(yīn)樂(yuè)關閉/打開(kāi)的(de)按鈕，不然肯定被用(yòng)戶罵死。

 

（6）有(yǒu)趣的(de)loading

Loading頁還是要有(yǒu)的(de)，萬一用(yòng)戶網速慢(màn)呢？

以上(shàng)做了那麽多事，如(rú)果沒有(yǒu)資源加載都(dōu)是玩不來的(de)，因此還需要一個(gè)loading的(de)支持。一般情況下頁面體積大(dà)于3m則要加上(shàng)loading頁。

 

然而loading還是可(kě)以做得很有(yǒu)趣的(de)，一般的(de)做法是：

1.引入品牌，例如(rú)APP宣傳頁；

2.引入有(yǒu)趣動畫，放(fàng)一個(gè)賤賤的(de)人(rén)物(wù)跳舞給你(nǐ)看；

3.一切從簡，用(yòng)CSS3簡單動畫。

====最後總結====

最後，給一個(gè)例子結尾吧(ba)。

這是空間5.0預約頁第二版，使用(yòng)了以上(shàng)的(de)若幹方法論，例如(rú)loading動畫，CSS3動畫，SVG星空連線，首屏星球重力感應，音(yīn)樂(yuè)（這裏使用(yòng)開(kāi)啓按鈕後播放(fàng)）等等。

（由于活動已結束，很多運營處都(dōu)被删掉從簡了，忽略那些細節）

  

（查看DEMO）

 

當然，真正要做到(dào)高(gāo)效制(zhì)作動态H5頁面，還是靠積累，因此平時做好的(de)細節動畫自己都(dōu)積累起來，下次分(fēn)分(fēn)鍾就能(néng)用(yòng)得上(shàng)。

請繼續閱讀(dú)《玩轉HTML5移動頁面（優化篇）》。

本文(wén)由 騰訊ISUX 版權所有(yǒu)，出處：騰訊ISUX (http://isux.tencent.com/play-with-html5-animate.html)