玩轉HTML5移動頁面

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）。

示例頁面以下（查看DEMO）：

  

（2） CSS3細節強調動畫

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

 

分兩種狀況：

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

  

（ 查看DEMO）

 

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

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

 

（3）SVG動畫

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

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

  

（ 查看DEMO）

 

可見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星空連線，首屏星球重力感應，音樂（這裏使用開啓按鈕後播放）等等。

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

 

  

（ 查看DEMO）

 

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

 

 

 

 

 

 

上次說的是讓頁面動起來的一些小技巧。
而頁面動起來的根基是功能可用的頁面，所以有必要分享一些優化細節的技巧和方向，熟悉掌握一些方法論仍是會對頁面開發大大提升效率的，而且也能防止疏忽缺漏。

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

（1） 動畫雪碧圖
涉及的動畫十分多，用的元素也十分多，請務必使用雪碧圖（Sprite）！
網上的工具備一些能夠幫助你生成雪碧圖的工具，例如CssGaga，GoPng等等，自動化構建工具Grunt和Gulp也提供了相應插件。
特別地，若是單張雪碧圖面積實在太大，能夠拆分雪碧圖，例如拆分紅2-4張，由於現代瀏覽器都支持4-6個同源請求下載，若資源實在太多，也能夠考慮把靜態資源放在不一樣源域名下去請求，這裏犧牲多幾個請求換來圖片同時加載比一張圖片慢慢加載要好，固然，這須要具體狀況去衡量。

順便提一下，我寫動畫的一個小技巧是把每一頁的動畫分在一個import.css裏面，而後最後在主樣式中import進去，這樣方便調試動畫，也容易維護，例如：

//style.css @import url("reset.import.css"); @import url("loading.import.css"); @import url("m-animate-1.import.css"); @import url("m-animate-2.import.css"); @import url("m-animate-3.import.css");

固然，import不是原生支持的，這裏須要一些流程化工具讓import的頁面在輸出以前通過組裝-壓縮的步驟。

（2）  圖片壓縮
圖片壓縮是老生常談，可是仍然有很多人忘記壓縮，那但是活生生的帶寬和流量的浪費啊…
壓縮圖片須要有好工具，有智圖，TinyPNG，JPEGmini等等。
依靠工具外，還有如下方式能夠優化圖片：
1.儘可能避免用PNG24。若是圖片色彩要求不高，請使用PNG8；
2.使用新格式，WEBP和BPG等新格式的到來，在不用考慮兼容的狀況下請大膽嘗試；
3.用SVG和ICONFONT代替簡單的圖標；
4.用FUFU的字蛛來代替藝術字體切圖。

（3）多終端兼容
多終端兼容是一切的根基，要知道有人拿着腎6+，有人拿着腎4，大則414×736，小則320×416（IPHONE4在SAFARI保留上下端導航），所以多終端兼容是十分必要的。
曾經有一種派系爲320派系，就是大部分頁面都是320寬度，所以乾脆直接用320的容器來包一切頁面，那樣也簡單，然而IPHOEN6和IPHONE6+的出現簡直是滅了這個派系。

那麼到底要如何兼容呢？
這裏我分了三個時期來講說：
A.設計初期。先審視設計稿，由於320派系的緣由，大部分設計稿只考慮到IPHONE5來設計，所以不少背景元素是隻有320px寬度（頁面實際渲染寬度），例以下圖。

那麼，這時候就須要設計提供一個較長的延伸背景了，最好是能夠重複的，用background-repeat能夠減小圖片大小。
B.設計中期。也就是具體的兼容方法，可使用CSS3 Media Query和類覆蓋。
1.CSS3 Media Query，按範圍兼容機型。

/*iphone6*/ @media only screen and (min-device-width : 375px) and (max-device-width : 667px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) { .page6 .ele-building{top: 69px;} .page6 .ele-runner{top: 100px;} .page6 .ele-pophome{top: 16px;} }

2.類覆蓋，這種方式適合直接爲小屏或大屏作總體兼容。
首先，爲小屏（大屏）加一個識別類，這裏小於420表示爲小屏幕（IPHONE4有上下導航欄）：

var bh = $(window).height(); // 480 - 64 = 416 iphone4 if(bh<420){ $('body').addClass('low-screen'); }

而後，對應識別類加上要變更的元素覆蓋，例如：

.page6 .ele-bg{top: 10px;} .low-screen .page6 .ele-bg{top: 0px;}

C.設計後期。這是最後一步，總體檢查和體驗，這裏面會暴露一些問題，例如元素在IPHONE6P顯得小了或者元素在IPHONE4擠不下了，能夠來最後大招解決：

1.大屏適當用zoom:(倍率)或者transform:scale(倍率)來增大元素，實測失真根本看不出來，設計師也滿意（畢竟不用多作一張圖！）；
2.小屏適當去掉一些元素，例如一些翻頁提示，一些多餘圖標，可讓優雅降級，把它們 display:none掉。

有以上幾步，基本就能兼容大部分機器了。兼容一直是個苦活，可是這是前端必修課，多練就會發覺其實也沒有那麼難嘛。

（4）交互提示
前面說了，加了音效就要加上音樂切換開關的按鈕，否則會被用戶罵死。還有其餘，例如若是你的頁面不能兼容橫屏，請監聽橫屏狀態，而後加上適當的橫屏提示。
例如：

// 橫屏監聽 var updateOrientation = function(){ if(window.orientation=='-90' || window.orientation=='90'){ $('.landscape-wrap').removeClass('hide'); console.log('爲了更好的體驗，請將手機/平板豎過來！'); }else{ $('.landscape-wrap').addClass('hide'); console.log('豎屏狀態'); } }; window.onorientationchange = updateOrientation;

提示越多，界面越友好，有時候設計師會漏掉一些可能出現的頁面狀況。
做爲有態度的前端，請好好把關，讓用戶有好的體驗。

（5）分享接口
H5作好了，要傳播分享才能展現你的牛逼轟轟。
然而分享實際上是個坑，分享到微信、手Q等都有各類問題。

A.微信
舊微信會使用WeixinJSBridge來聲明分享的縮略圖、標題、正文等，比較方便。例如：

而最新的微信提供了新的微信SDK，須要在公衆帳號綁定所屬域名以後調用SDK做分享，能夠說分享功能會更增強大，坑也會更加少。

B.手Q
手Q支持聲明meta標籤的的分享方式，例如：

而若在qq.com域名下也支持api的定義方式。

C.通常化分享
在默認兼容舊版微信、手Q或者各類瀏覽器，平臺，能夠用這樣的方法：
寫h1作標題，p作內容，img作縮略圖，只須要把h1隱藏掉就好，這裏的縮略圖最好要大於200x200px。

例如：

固然，這樣也有利於搜索引擎拉取信息。

分享的坑還有更多，例如不一樣瀏覽器例如QQ瀏覽器、Chrome也會有本身的默認拉取方式（部分截圖做縮略圖），須要多加測試優化。

（5）SEO搜索引擎優化
SEO（搜索引擎優化）的基本作法是把頁面結構寫好，這包括：

1.定義精確的網頁標題。你的標題應該有歸納性，能明確告知搜索引擎和用戶你的網站大概內容和目的，能夠是當前頁面標題-所屬類型-產品名，例如「全民來猜歌-年費黃鑽-QQ空間」。

2.針對頁面內容補充description和keywords的meta標籤。你須要簡短總結頁面的主要目標，而後補充description，以及根據關鍵詞補充keywords。

3.優化你的超連接和圖片。包括優化超連接顯示的文本，要具備語義性也要跟超連接的網頁具備相關性，例如「空間主頁」就不要連接到「www.qq.com」。同時，要補充」title」和」alt」屬性，例如「<img src=’images/apple.jpg’ title=’蘋果示例圖’ alt=’蘋果示例圖’ />」。

4.創建良好的網站導航和sitemap。網站須要有一個良好的導航，控制根目錄和各子目錄的關鍵，經過sitemap能夠幫助網站主瞭解網站結構，也方便搜索引擎收錄整個站點。

5.優化目錄結構和URL。你的URL應該有語義性，簡短易懂，例如http://www.apple.com/macbook-air/，並且每一層級都要有它對應的頁面展現以及語義。

6.善用h1-h6的標題結構樹。合理的標題能夠強調文字，也能讓搜索引擎更加了解到各標題的重要性，所以創建良好的標題樹十分有意義。

7.不斷致力於提供優質的內容。社交化分享是網站曝光最快的因素，所以不斷提供了優質原創內容才能真正提升你的網站曝光權重。

 

（6）無障礙

無障礙的普及是一件好事，這讓互聯網真正地爲全部人可用。所以咱們也應該爲之而努力，無障礙的根基是你頁面強壯的語義性和結構性，具體能夠參考《騰訊網無障礙說明》瞭解無障礙的優化手段。