天跟大家一起絮叨一些H5前端頁面制作技巧，一般人不會(huì)說出來的移動(dòng)前端動(dòng)畫技巧哦，看完之后你會(huì)發(fā)現(xiàn)許多非常有用的動(dòng)畫處理技巧。哈哈

一般情況下，拿到設(shè)計(jì)稿我們會(huì)有兩種選擇：

來一個(gè)條件表達(dá)式哈哈：產(chǎn)物=設(shè)計(jì)稿處理？靜態(tài)輸出：讓頁面動(dòng)起來；

作為一個(gè)有志向的前端，當(dāng)然不會(huì)讓頁面生硬地靜態(tài)展示咯，但是如果需求時(shí)間很短，應(yīng)該如何破呢？

下面這些小技巧可以讓你在沒有想法的時(shí)候，讓你的頁面生動(dòng)不少（喜歡做雷鋒的我，不必感謝）

NO1：CSS3時(shí)序錯(cuò)開漸顯動(dòng)畫

這是一種比較常用的動(dòng)畫，它的優(yōu)點(diǎn)節(jié)奏感強(qiáng)，做法就是先讓每個(gè)元素隱藏，然后當(dāng)頁面呈現(xiàn)后每個(gè)元素錯(cuò)開時(shí)間出現(xiàn)。

For example：（請(qǐng)忽略瀏覽器私有屬性）

<div class="box1"></div>

<div class="box2"></div>

.box1,.box2{opacity:0;position:absolute;left:50%;translate3D(-50%,0,0);}

.box1{top:30px;}

.box2{top:50px;}

/*active為當(dāng)前頁面呈現(xiàn)時(shí)加上的觸發(fā)類*/

.active .box1,

.active .box2{animation:ele-show .5s linear forwards;}

.active .box1{animation-delay: .2s;}

.active .box2{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)}

}

效果就是兩個(gè)元素分別從上面掉下來，這里有個(gè)小細(xì)節(jié)（keyframes），為了讓掉下來的動(dòng)畫生動(dòng)點(diǎn)，應(yīng)該在90%的時(shí)候先掉下一點(diǎn)點(diǎn)，然后瞬間在100%時(shí)回跳5px。

注意這里還有一個(gè)細(xì)節(jié)，安卓2.3.*不能良好支持-webkit-animation-fill-mode，也就是漸變動(dòng)畫不能停止在最后一幀。有這樣一個(gè)解決方案：

1.用Modernizr去檢測(cè)是否支持這個(gè)屬性，加上識(shí)別類.no-animation-fill-mode；

2.根據(jù)識(shí)別類采取以下措施：

（1）用JS模擬同樣效果；

（2）用css屏蔽掉動(dòng)畫；

（3）或者直接全部都用transition來做（不要keyframes）

NO2：CSS3細(xì)節(jié)強(qiáng)調(diào)動(dòng)畫

有些局部細(xì)節(jié)如果還是漸現(xiàn)顯示的話，會(huì)比較枯燥，例如標(biāo)題、按鈕等，需要一種強(qiáng)調(diào)，下面我們分兩種情況來說：

1. 如果時(shí)間允許的話，基本做法是先把一個(gè)元素切成不同的塊狀，例如小人的手腳都切成不同圖片，然后讓它們重新組合，再通過賦予不同的CSS動(dòng)畫來讓它生動(dòng)起來。

2. 如果時(shí)間緊湊， 對(duì)動(dòng)畫細(xì)節(jié)要求不那么嚴(yán)格細(xì)致，可以使用一些輔助工具：Animate.css，通過直接預(yù)覽選擇想要的動(dòng)效，然后下載它的CSS把對(duì)應(yīng)keyframe扒下來就好了。

NO3：SVG動(dòng)畫

SVG技術(shù)現(xiàn)在越來越不陌生，使用門檻漸漸降低，然后它也是可以使用CSS控制的，有時(shí)候用CSS3比較難實(shí)現(xiàn)的線條的描繪動(dòng)畫，也可以用SVG來搞定。

NO4：背景音樂&音效

H5頁面要炫酷，畫面生動(dòng)還是不夠的，一定要配合生動(dòng)的音樂（可以跟產(chǎn)品溝通提供對(duì)應(yīng)的音樂資源）。當(dāng)然有了音樂資源我們是否可以直接引用呢，有幾點(diǎn)還是要優(yōu)化一下：

音樂不宜過長，最好30s左右，最好加上漸現(xiàn)漸隱效果，方便循環(huán)播放；音樂體積（一般200K以下都可以接收）最好要小，在手機(jī)瀏覽的話要考慮流量啦。

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

在這里需要注意：ios系統(tǒng)是不能自動(dòng)播放音樂的，一定要觸發(fā)一個(gè)用戶交互事件，例如點(diǎn)擊，有一種自創(chuàng)的hack方法可以規(guī)避：

通過new一張圖片，監(jiān)聽一張圖片的onload事件，結(jié)束后回調(diào)執(zhí)行音頻播放audio.play()即可，原理估計(jì)是動(dòng)了dom結(jié)構(gòu)，相當(dāng)于執(zhí)行了一次交互。最后，記得暴露一個(gè)音樂關(guān)閉/打開的按鈕，不然肯定用戶哪里找得到按鈕。

NO5：有趣的loading

Loading頁還是要有的，萬一用戶網(wǎng)速慢呢？

以上做了那么多事，如果沒有資源加載都是玩不來的，因此還需要一個(gè)loading的支持。

然而loading還是可以做得很有趣的，一般的做法是：

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

2.引入有趣動(dòng)畫，放一個(gè)賤賤的人物跳舞給你看；

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

當(dāng)然，真正要做到高效制作動(dòng)態(tài)H5頁面，還是靠積累，因此平時(shí)做好的細(xì)節(jié)動(dòng)畫自己都積累起來，下次分分鐘就能用得上。小編會(huì)不定時(shí)更新前端相關(guān)的知識(shí)，有興趣的話歡迎大家加群142991222一起討論交流學(xué)習(xí)。