移動前端頁面製做技巧（一）轉載

通常人不會說出來的移動前端動畫技巧，文章來自「TQ的獨立博客：玩轉HTML5移動頁面」，在這篇教程你會發現許多很是有用的動畫處理技巧，細心點還會發現許多有用的zepto插件，例如：zepto.onepagescroll.js、zepto-touch.js、weixinshare.js，如下爲原文。

標題起得有點大(๑´ㅂ`๑)，今天來談談H5移動頁面的開發心得（技巧）。

通常狀況下，拿到設計稿你有兩種選擇：
//條件表達式
產物＝設計稿處理？靜態輸出：讓頁面動起來；

做爲一個有志向的前端，固然不會讓頁面生硬地靜態展現啦(๑´ㅁ`)！但是需求時間又很短很短，怎麼辦呢？
因此下面的一些小技巧，至少能在你沒有想法的時候讓你的頁面生動很多呢，同時也能確保你的頁面不會出什麼問題（後面有頁面優化技巧）。

＝＝＝＝前方高能＝＝＝＝

TIPS1 css3時序錯開漸顯動畫

這是一種比較經常使用的動畫，它的優勢是節奏感強，作法就是先讓每一個元素隱藏，而後當頁面呈現後每一個元素錯開時間出現。
例子（這裏忽略兼容前綴和別的無關屬性）：

<div class="ele1"></div>
<div class="ele2"></div>

.ele1,.ele2{opacity:0;position:absolute;left:50%;translate3D(-50%,0,0);}
.ele1{top:30px;}
.ele2{top:50px;}

/*active爲當前頁面呈現時加上的觸發類*/
.active .ele1,
.active .ele2{animation:ele-show .5s linear forwards;}
.active .ele1{animation-delay: .2s;}
.active .ele2{animation-delay: .4s;}

@keyframes ele-show
{
    0% {opacity: 0.2;translate3D(-20px,0,0)}
    90% {opacity: 1;translate3D(5px,0,0)}
    100% {opacity: 1;translate3D(0px,0,0)}
}

效果就是兩個元素分別從上面掉下來，這裏有個小細節（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

TIPS2 CSS3細節強調動畫

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

1.若是時間容許的話，基本作法是先把一個元素切成不一樣的塊狀，例如小人的手腳都切成不一樣圖片（好殘忍(つд⊂)），而後讓它們從新組合，再經過賦予不一樣的CSS動畫來讓它生動起來，這裏有個引用桑尼真（sunnycchen）的例子：

查看DEMO

2.若是時間緊湊，又不像桑尼同樣擅長於動畫細節，可使用一些輔助工具：
Animate.css，經過直接預覽選擇想要的動效，而後下載它的CSS把對應keyframe扒下來就行了（引用整個CSS是資源浪費）。

TIPS3 SVG動畫

SVG技術如今愈來愈不陌生，使用門檻也漸漸下降，並且SVG動畫仍是可使用CSS控制的！
先看個給朋友慶生作的頁面，裏面是SVG的蛋糕：

查看DEMO

可見SVG是很強大的！彌補了CSS3的不足。
然而這種動畫也是略耗時，但有一種比較經常使用的，就是線條的描繪動畫，CSS3比較難實現，這裏能夠用SVG，看圖：

先介紹咱們組的一個PS插件svgArtisan（該工具還沒主頁，暫時放在雲盤），這個工具能夠直接根據PSD的路徑圖層生成SVG圖形。
接下來就簡單了，先用插件生成線條的SVG，例如是這樣的：

<svg version="1.1" baseProfile="full" id="m3path" height="200px" width="246px">
    <switch>
        <path stroke="rgb( 130, 220, 218 )" stroke-width="1px" stroke-linecap="butt" stroke-linejoin="miter" fill="none"
         d="M0.065,45.761 C0.065,45.761 206,0 206,0 C206,0 242.5,52.5 242.5,52.5 C242.5,52.5 199.5,142 199.5,142 C199.5,142 246,200 246,200  "/>
         <foreignObject>
            <div class="m3-svg-nosupport"></div>
        </foreignObject>
    </switch>
</svg>

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

#m3path{stroke-dasharray: 1000;stroke-dashoffset: 1000;}
.active #m3path{animation:dash 2.5s 1s linear forwards 1;}
@keyframes dash {
   to {stroke-dashoffset: 0;}
}

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

TIPS4 重力陀螺儀

想讓頁面更有層次感，不妨讓設計提供一些碎片元素，例如彩花，星星之類，而後把它們單獨切出來放畫面前景，使用陀螺儀伴隨着手機運動碎片也跟着運動，多麼好玩！
這裏提供一個工具能夠輕鬆實現陀螺儀重力效果的：parallax.js
用法簡單，定義一個parallax-obj的父類，把須要動的元素加上layer的類，而後設置動的範圍data-depth：

<div class="parallax-obj">
    <div class="layer ele-p1" data-depth="1.00"></div>
    <div class="layer ele-p2" data-depth="0.80"></div>
    <div class="layer ele-p3" data-depth="0.30"></div>
    <div class="layer ele-p4" data-depth="0.30"></div>
    <div class="layer ele-p5" data-depth="1.10"></div>
</div>

最後只須要調用：$(‘.parallax-obj’).parallax();就一切OK了。

TIPS5 背景音樂&音效

H5頁面要炫酷，畫面生動仍是不夠的，必定要配合生動的音樂。所以能夠主動跟設計或產品溝通，讓他們能夠提供音樂資源，分分鐘致使UV猛漲有木有！
固然，有了音樂，前端也不是直接引用的，仍是有點要求：
1.音樂不宜過長，30s爲佳，並且音樂要加上漸現漸隱效果，方便循環播放；
2.音樂體積要小，音質和流量，在手機上仍是優先考慮流量吧。
通常背景音樂體積能夠接受的範圍是200K如下，若太大，可使用格式工廠等軟件，下降它的比特率和聲道來改變體積。

接着，只須要簡單引用：

<audio id="audio" src="音樂地址" loop preload="auto" autoplay="true" class="hide"></audio>

這裏有個問題，ios是不能自動播放音樂的，必定要觸發一個用戶交互事件，例如點擊，可是有一種自創的hack方法能夠規避：
經過new一張圖片，監聽一張圖片的onload事件，結束後回調執行音頻播放audio.play()便可，原理估計是動了dom結構，至關於執行了一次交互。
最後，記得暴露一個音樂關閉/打開的按鈕，否則確定被用戶罵死(°ﾛ°٥)。

TIPS6 有趣的loading

Loading頁仍是要有的，萬一用戶網速慢呢？
以上作了那麼多事，若是沒有資源加載都是玩不來的，所以還須要一個loading的支持。
然而loading仍是能夠作得頗有趣的，通常的作法是：
1.引入品牌，例如APP宣傳頁；
2.引入有趣動畫，放一個賤賤的人物跳舞給你看；
3.一切從簡，用CSS3簡單動畫。

＝＝＝＝＝＝＝
休息區
說了那麼多，來個例子吧（電腦上用Chrome模擬手機打開）：
查看DEMO

這是空間5.0預定頁第二版，使用了以上的若干方法論，例如loading動畫，CSS3動畫，SVG星空連線，首屏星球重力感應，音樂（這裏使用開啓按鈕後播放）等等。
（因爲活動已結束，不少運營處都被刪掉從簡了，忽略那些細節）

在繼續看下面的文字（頁面優化技巧）以前，先問一個問題，若是仍是感到頁面很無趣怎麼辦？
這裏提供一些工（gan）具（huo）吧：
1.SPARK動畫平臺，這是咱們組作的一個動畫效果平臺，裏面集合了全部的牛逼動畫，可讓你靈感猛增！（目前已開放外網使用）；
2.OneDiv，這是個神奇的網站，裏面的全部細節都是用一個div元素經過複雜的Css3實現的，有空能夠去開開腦洞噢；
3.貝塞爾曲線生成器，動畫速率太平怎麼辦？果斷使用貝塞爾曲線來調節動畫，這個網站能夠幫你生成可視化的曲線。
還有各類神奇工具，還待大家本身發掘，我就不所有列出鳥。

固然，真正要作到高效製做動態H5頁面，仍是靠積累，所以平時作好的細節動畫本身都積累起來，下次分分鐘就能用得上。
//順便賣個關子，最近正在作一個神奇的工具幫助減輕動畫的製做負擔，請期待喲(✪ω✪)。
＝＝＝＝＝＝＝

繼續下文，是一些頁面的優化細節技巧，這很關鍵噢！

TIPS1 動畫雪碧圖

涉及的動畫十分多，用的元素也十分多，請務必使用雪碧圖（Sprite）！
網上的工具十分多，例如濤哥（ytzong）的CssGaga，AlloyTeam的GoPng等等，自動化構建工具Grunt和Gulp也提供了相應插件。
這裏要提一下的是若是頁面圖片實在太多，能夠分雪碧圖，例如分紅1-3張，由於三張圖片是能夠同時加載的，這裏犧牲多2個請求換來圖片同時加載比一張圖片慢慢加載要好。
順便提一下，我寫動畫的方法是每一頁的動畫分在一個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");

TIPS2 圖片壓縮

圖片壓縮是老生常談，可是仍然有很多人忘記壓縮，那但是活生生的帶寬和流量浪費啊…
壓縮圖片須要有好工具，這裏推薦咱們作的一個工具智圖，相關介紹請看ISUX官博文章。
可是仍然有如下方式優化圖片：
1.儘可能避免用PNG24。若是圖片色彩要求不高，請使用PNG8；
2.使用新格式，WEBP和BPG等新格式的到來，在不用考慮兼容的狀況下請大膽嘗試；
3.用SVG和ICONFONT代替簡單的圖標；
4.用糖餅和FUFU的字蛛來代替藝術字體切圖。

TIPS3 多終端兼容

多終端兼容是一切的根基，要知道有人拿着腎6+，有人拿着腎4，大則414x736，小則320x416（IPHONE4在SAFARI保留上下端導航），所以多終端兼容是十分必要的。
曾經有一種派系爲320派系，就是大部分頁面都是320寬度，所以乾脆直接用320的容器來包一切頁面，那樣也簡單，然而IPHOEN6和IPHONE6+的出現簡直是滅了這個派系。
那麼到底要如何兼容呢？
這裏我分了三個時期來講說：
（1）設計初期。先審視設計稿，由於320派系的緣由，大部分設計稿只考慮到IPHONE5來設計，所以不少背景元素是隻有320px寬度（頁面實際渲染寬度），例以下圖。

那麼，這時候就須要設計提供一個較長的延伸背景了，最好是能夠重複的，用background-repeat能夠減小圖片大小。
（2）設計中期。也就是具體的兼容方法，可使用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;}

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

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

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

TIPS4 交互提示

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

// 橫屏監聽
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;

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

TIPS5 分享接口

H5作好了，要傳播分享才能展現你的牛逼轟轟呀。然而分享一切是個坑，分享到微信、手Q、空間、微博等都有各類問題，爲此我還寫過一篇文章《HTML5頁面分享功能》，裏面有各類方法。
然而最近微信開放了微信API，分享功能愈來愈牛逼了，相信往後分享的坑會愈來愈少。

TIPS6 seo和無障礙

SEO（搜索引擎優化）是個長談啊，但基本的作法是寫好meta標籤，寫好頁面結構（H1-H6的層級樹），用好語義化標籤等等。
至於無障礙，是我薄弱的環節，還請Google黃老師（stonehuang）的各類文章，也但願各位前端能把這一塊好好認識一下，並用於各產品。
其實分享接口，SEO，還有無障礙都基於良好的html結構，這是玩轉頁面的基礎。

最後，羅嗦了這麼多，只是我本身的一些小經驗，請輕拍磚，多交流。再次感謝你的閱讀。