玩轉HTML5移動頁面中的(de)動效
- 發布時間: 2015-08-11 16:49:30
- 浏覽次數: 1899
====前方高(gāo)能====
一(yī)、CSS3時序錯開漸顯動畫
這是一(yī)種比較常用的(de)動畫，它的(de)優點是節奏感強，做(zuò)法就是先讓每個元素隐藏，然後當頁面呈現後每個元素錯開時間出現。
例子(zǐ)（忽略兼容前綴和(hé)無關屬性）：
效果就是兩個元素分别從上面掉下來，這裏有個小細節（keyframes），為(wèi)了讓掉下來的(de)動畫生動點，應該是在90%的(de)時候先掉下一(yī)點點，然後瞬間在100%時回跳5px。
還有個細節，安卓2.3.*不能良好支持-webkit-animation-fill-mode，也就是漸變動畫不能停止在最後一(yī)幀。有這樣一(yī)個解決方案：
1.用Modernizr去(qù)檢測是否支持這個屬性，加上識别類.no-animation-fill-mode；
2.根據識别類采取以下措施：
（1）用js模拟同樣效果；
（2）用css屏蔽掉動畫；
（3）或者直接全部都用transition來做(zuò)（不要keyframes）。
示例頁面如(rú)下：
二、CSS3細節強調動畫
一(yī)些局部細節如(rú)果還是漸現顯示，會枯燥沒什麽感覺，例如(rú)标題、按鈕等，需要一(yī)種強調。
分兩種情況：
1.如(rú)果時間允許的(de)話，基本做(zuò)法是先把一(yī)個元素切成不同的(de)塊狀，例如(rú)小人的(de)手腳都切成不同圖片，然後讓它們重新組合，再通過賦予不同的(de)CSS動畫來讓它生動起來，這裏引用個webank的(de)例子(zǐ)：
2.如(rú)果時間緊湊，又不像桑尼一(yī)樣擅長(cháng)于動畫細節，可(kě)以使用一(yī)些輔助工具：
Animate.css，通過直接預覽選擇想要的(de)動效，然後下載它的(de)CSS把對應的(de)keyframe扒下來就好了（引用整個CSS是資源浪費）。
三、SVG動畫
SVG技術越來越不陌生，使用門檻也漸漸降低(dī)，而且SVG動畫還可(kě)以使用CSS控制。
先看個生日頁面，是個SVG的(de)蛋糕：
可(kě)見SVG是很強大的(de)！彌補了CSS3的(de)不足。
然而這種動畫也是略耗時，但有一(yī)種比較常用的(de)，就是線條的(de)描繪動畫，CSS3比較難實現，這裏可(kě)以用SVG，看圖：
介紹一(yī)個PS插件svgArtisan（目前還未有主頁），這個工具可(kě)以直接根據PSD的(de)路徑圖層生成SVG圖形。
接下來就簡單了，将設計稿上的(de)路徑圖形用插件生成對應的(de)SVG，例如(rú)是這樣的(de)：
（注意，其中的(de)foreignObject标簽內(nèi)是不支持svg的(de)浏覽器會看到一(yī)張.m3-svg-nosupport标簽下的(de)圖片。）
再使用CSS3的(de)animation控制stroke-dashoffset：
效果不難吧(ba)！SVG還有各種用途，例如(rú)制作ICONFONT等，可(kě)以深入挖掘。
四、 重力陀螺儀
想讓頁面更有層次感，不妨讓設計提供一(yī)些碎片元素，例如(rú)彩花，星星之類，然後把它們單獨切出來放畫面前景，使用陀螺儀伴随着手機運動碎片也跟着運動，多麽好玩！
這裏提供一(yī)個工具可(kě)以輕松實現陀螺儀重力效果的(de)：parallax.js
用法簡單，定義一(yī)個parallax-obj的(de)父類，把需要動的(de)元素加上layer的(de)類，然後設置動的(de)範圍data-depth：
五、背景音樂(yuè)&音效
H5頁面要炫酷，畫面生動還是不夠的(de)，一(yī)定要配合生動的(de)音樂(yuè)。因此可(kě)以主動跟設計或産品溝通，讓他們可(kě)以提供音樂(yuè)資源，分分鍾導緻UV猛漲有木有！
當然，有了音樂(yuè)，前端也不是直接引用的(de)，還是有點要求：
1.音樂(yuè)不宜過長(cháng)，30s為(wèi)佳，而且音樂(yuè)要加上漸現漸隐效果，方便循環播放；
2.音樂(yuè)體積要小，音質和(hé)流量，在手機上還是優先考慮流量吧(ba)。
一(yī)般背景音樂(yuè)體積可(kě)以接受的(de)範圍是200K以下，若太大，可(kě)以使用格式工廠等軟件，降低(dī)它的(de)比特率和(hé)聲道(dào)來改變體積。
接着，隻需要簡單引用：
這裏有個問題，IOS是不能自(zì)動播放音樂(yuè)的(de)，一(yī)定要觸發一(yī)個用戶交互事件，例如(rú)點擊。
但是有一(yī)種hack的(de)方法可(kě)以讓IOS微信側頁面自(zì)動播放（SAFARI依舊(jiù)無效）：
通過new一(yī)張圖片，監聽一(yī)張圖片的(de)onload事件，結束後回調執行音頻播放audio.play()即可(kě)，原理(lǐ)估計是動了dom結構，相當于執行了一(yī)次交互。（有人也用過createEvent模拟，原理(lǐ)也是動了dom。）
因此，記得暴露一(yī)個音樂(yuè)關閉/打開的(de)按鈕，不然肯定被用戶罵死。
六、有趣的(de)loading
Loading頁還是要有的(de)，萬一(yī)用戶網速慢呢(ne)？
以上做(zuò)了那麽多事，如(rú)果沒有資源加載都是玩不來的(de)，因此還需要一(yī)個loading的(de)支持。一(yī)般情況下頁面體積大于3m則要加上loading頁。
然而loading還是可(kě)以做(zuò)得很有趣的(de)，一(yī)般的(de)做(zuò)法是：
1.引入品牌，例如(rú)APP宣傳頁；
2.引入有趣動畫，放一(yī)個賤賤的(de)人物跳舞給你看；
3.一(yī)切從簡，用CSS3簡單動畫。
====最後總結====
最後，給一(yī)個例子(zǐ)結尾吧(ba)。
當然，真正要做(zuò)到高(gāo)效制作動态H5頁面，還是靠積累，因此平時做(zuò)好的(de)細節動畫自(zì)己都積累起來，下次分分鍾就能用得上。
