玩轉HTML5移動頁面(動效篇)

原文：http://www.grycheng.com/?p=458

做爲一名前端，在拿到設計稿時你有兩種選擇：

1.快速輸出靜態頁面

2.加上高級大氣上檔次狂拽炫酷屌炸天的動畫讓頁面動起來

做爲一個有志向的前端，固然是選2啦！但是需求時間又很短很短，怎麼辦呢？

 

此次就來談談一些動畫設計的小技巧，能在你時間很少又沒有動畫想法的時候瞬間讓頁面增色很多。

同時也會談及移動端H5頁面的優化細節與關鍵點，所以本文章將分爲 動效篇和 優化篇。

 

====前方高能====

（1）  CSS3時序錯開漸顯動畫

這是一種比較經常使用的動畫，它的優勢是節奏感強，作法就是先讓每一個元素隱藏，而後當頁面呈現後每一個元素錯開時間出現。

例子（忽略兼容前綴和無關屬性）：

效果就是兩個元素分別從上面掉下來，這裏有個小細節（keyframes），爲了讓掉下來的動畫生動點，應該是在90%的時候先掉下一點點，而後瞬間在100%時回跳5px。

還有個細節，安卓2.3.*不能良好支持-webkit-animation-fill-mode，也就是漸變更畫不能中止在最後一幀。有這樣一個解決方案：

1.用Modernizr去檢測是否支持這個屬性，加上識別類.no-animation-fill-mode；

2.根據識別類採起如下措施：
（1）用js模擬一樣效果；
（2）用css屏蔽掉動畫；
（3）或者直接所有都用transition來作（不要keyframes）。

示例頁面以下

2） CSS3細節強調動畫

一些局部細節若是仍是漸現顯示，會枯燥沒什麼感受，例如標題、按鈕等，須要一種強調。

分兩種狀況：

1.若是時間容許的話，基本作法是先把一個元素切成不一樣的塊狀，例如小人的手腳都切成不一樣圖片，而後讓它們從新組合，再經過賦予不一樣的CSS動畫來讓它生動起來，這裏引用個webank的例子：

2.若是時間緊湊，又不像桑尼同樣擅長於動畫細節，可使用一些輔助工具：

Animate.css，經過直接預覽選擇想要的動效，而後下載它的CSS把對應的keyframe扒下來就行了（引用整個CSS是資源浪費）。

 

（3）SVG動畫

SVG技術愈來愈不陌生，使用門檻也漸漸下降，並且SVG動畫還可使用CSS控制。

先看個生日頁面，是個SVG的蛋糕：

可見SVG是很強大的！彌補了CSS3的不足。

然而這種動畫也是略耗時，但有一種比較經常使用的，就是線條的描繪動畫，CSS3比較難實現，這裏能夠用SVG，看圖：

介紹一個PS插件 svgArtisan（目前還未有主頁），這個工具能夠直接根據PSD的路徑圖層生成SVG圖形。

接下來就簡單了，將設計稿上的路徑圖形用插件生成對應的SVG，例如是這樣的：

（注意，其中的foreignObject標籤內是不支持svg的瀏覽器會看到一張.m3-svg-nosupport標籤下的圖片。）

再使用CSS3的animation控制stroke-dashoffset：

效果不難吧！SVG還有各類用途，例如製做ICONFONT等，能夠深刻挖掘。

（4） 重力陀螺儀

想讓頁面更有層次感，不妨讓設計提供一些碎片元素，例如彩花，星星之類，而後把它們單獨切出來放畫面前景，使用陀螺儀伴隨着手機運動碎片也跟着運動，多麼好玩！

這裏提供一個工具能夠輕鬆實現陀螺儀重力效果的： parallax.js

用法簡單，定義一個parallax-obj的父類，把須要動的元素加上layer的類，而後設置動的範圍data-depth：

（5） 背景音樂&音效

H5頁面要炫酷，畫面生動仍是不夠的，必定要配合生動的音樂。所以能夠主動跟設計或產品溝通，讓他們能夠提供音樂資源，分分鐘致使UV猛漲有木有！

 

固然，有了音樂，前端也不是直接引用的，仍是有點要求：

1.音樂不宜過長，30s爲佳，並且音樂要加上漸現漸隱效果，方便循環播放；

2.音樂體積要小，音質和流量，在手機上仍是優先考慮流量吧。

通常背景音樂體積能夠接受的範圍是200K如下，若太大，可使用格式工廠等軟件，下降它的比特率和聲道來改變體積。

接着，只須要簡單引用：

這裏有個問題，IOS是不能自動播放音樂的，必定要觸發一個用戶交互事件，例如點擊。

可是有一種hack的方法可讓IOS微信側頁面自動播放（SAFARI依舊無效）：

經過new一張圖片，監聽一張圖片的onload事件，結束後回調執行音頻播放audio.play()便可，原理估計是動了dom結構，至關於執行了一次交互。（有人也用過createEvent模擬，原理也是動了dom。）

所以，記得暴露一個音樂關閉/打開的按鈕，否則確定被用戶罵死。

 

（6）有趣的loading

Loading頁仍是要有的，萬一用戶網速慢呢？

以上作了那麼多事，若是沒有資源加載都是玩不來的，所以還須要一個loading的支持。通常狀況下頁面體積大於3m則要加上loading頁。

 

然而loading仍是能夠作得頗有趣的，通常的作法是：

1.引入品牌，例如APP宣傳頁；

2.引入有趣動畫，放一個賤賤的人物跳舞給你看；

3.一切從簡，用CSS3簡單動畫。

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

最後，給一個例子結尾吧。

這是空間5.0預定頁第二版，使用了以上的若干方法論，例如loading動畫，CSS3動畫，SVG星空連線，首屏星球重力感應，音樂（這裏使用開啓按鈕後播放）等等。

（因爲活動已結束，不少運營處都被刪掉從簡了，忽略那些細節）

固然，真正要作到高效製做動態H5頁面，仍是靠積累，所以平時作好的細節動畫本身都積累起來，下次分分鐘就能用得上。

 

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