作為一名前端关斜，在拿到設計稿時你有兩種選擇：
1.快速輸出靜態(tài)頁面
2.加上高級大氣上檔次狂拽炫酷屌炸天的動畫讓頁面動起來
作為一個有志向的前端彻磁，當然是選2啦丽啡！可是需求時間又很短很短耐薯，怎么辦呢蜓陌？
這次就來談談一些動畫設計的小技巧确虱，能在你時間不多又沒有動畫想法的時候瞬間讓頁面增色不少含友。
同時也會談及移動端H5頁面的優(yōu)化細節(jié)與關鍵點，因此本文章將分為動效篇和優(yōu)化篇。
一窘问、動效篇
(1) CSS3時序錯開漸顯動畫
這是一種比較常用的動畫辆童，它的優(yōu)點是節(jié)奏感強，做法就是先讓每個元素隱藏惠赫，然后當頁面呈現(xiàn)后每個元素錯開時間出現(xiàn)把鉴。
例子(忽略兼容前綴和無關屬性)：
效果就是兩個元素分別從上面掉下來，這里有個小細節(jié)(keyframes)儿咱，為了讓掉下來的動畫生動點庭砍，應該是在90%的時候先掉下一點點，然后瞬間在100%時回跳5px混埠。
還有個細節(jié)怠缸，安卓2.3.*不能良好支持-webkit-animation-fill-mode，也就是漸變動畫不能停止在最后一幀岔冀。有這樣一個解決方案：
1.用Modernizr去檢測是否支持這個屬性凯旭，加上識別類.no-animation-fill-mode;
2.根據(jù)識別類采取以下措施：
(1)用js模擬同樣效果;
(2)用css屏蔽掉動畫;
(3)或者直接全部都用transition來做(不要keyframes)。
示例頁面如下(查看DEMO)：
(2) CSS3細節(jié)強調動畫
一些局部細節(jié)如果還是漸現(xiàn)顯示使套，會枯燥沒什么感覺罐呼，例如標題、按鈕等侦高，需要一種強調嫉柴。
分兩種情況：
1.如果時間允許的話，基本做法是先把一個元素切成不同的塊狀奉呛，例如小人的手腳都切成不同圖片计螺，然后讓它們重新組合，再通過賦予不同的CSS動畫來讓它生動起來瞧壮，這里引用個webank的例子：
(查看DEMO)
2.如果時間緊湊登馒，又不像桑尼一樣擅長于動畫細節(jié)，可以使用一些輔助工具：
Animate.css咆槽，通過直接預覽選擇想要的動效陈轿，然后下載它的CSS把對應的keyframe扒下來就好了(引用整個CSS是資源浪費)。
(3)SVG動畫
SVG技術越來越不陌生秦忿，使用門檻也漸漸降低麦射，而且SVG動畫還可以使用CSS控制。
先看個生日頁面灯谣，是個SVG的蛋糕：
(查看DEMO)
可見SVG是很強大的潜秋！彌補了CSS3的不足。
然而這種動畫也是略耗時胎许，但有一種比較常用的峻呛，就是線條的描繪動畫罗售，CSS3比較難實現(xiàn)，這里可以用SVG杀饵，看圖：
介紹一個PS插件svgArtisan(目前還未有主頁)莽囤，這個工具可以直接根據(jù)PSD的路徑圖層生成SVG圖形。
接下來就簡單了切距，將設計稿上的路徑圖形用插件生成對應的SVG朽缎，例如是這樣的：
(注意，其中的foreignObject標簽內是不支持svg的瀏覽器會看到一張.m3-svg-nosupport標簽下的圖片谜悟。)
再使用CSS3的animation控制stroke-dashoffset：
效果不難吧话肖！SVG還有各種用途，例如制作ICONFONT等葡幸，可以深入挖掘最筒。
(4) 重力陀螺儀
想讓頁面更有層次感，不妨讓設計提供一些碎片元素蔚叨，例如彩花床蜘，星星之類，然后把它們單獨切出來放畫面前景蔑水，使用陀螺儀伴隨著手機運動碎片也跟著運動邢锯，多么好玩！
這里提供一個工具可以輕松實現(xiàn)陀螺儀重力效果的：parallax.js
用法簡單搀别，定義一個parallax-obj的父類丹擎，把需要動的元素加上layer的類，然后設置動的范圍data-depth：
(5) 背景音樂&音效
H5頁面要炫酷歇父，畫面生動還是不夠的蒂培，一定要配合生動的音樂。因此可以主動跟設計或產(chǎn)品溝通榜苫，讓他們可以提供音樂資源护戳，分分鐘導致UV猛漲有木有！
當然垂睬，有了音樂灸异，前端也不是直接引用的，還是有點要求：
1.音樂不宜過長羔飞，30s為佳，而且音樂要加上漸現(xiàn)漸隱效果檐春，方便循環(huán)播放;
2.音樂體積要小逻淌，音質和流量，在手機上還是優(yōu)先考慮流量吧疟暖。
一般背景音樂體積可以接受的范圍是200K以下卡儒，若太大田柔，可以使用格式工廠等軟件，降低它的比特率和聲道來改變體積骨望。
接著硬爆，只需要簡單引用：
這里有個問題，IOS是不能自動播放音樂的擎鸠，一定要觸發(fā)一個用戶交互事件缀磕，例如點擊。
但是有一種hack的方法可以讓IOS微信側頁面自動播放(SAFARI依舊無效)：
通過new一張圖片劣光，監(jiān)聽一張圖片的onload事件袜蚕，結束后回調執(zhí)行音頻播放audio.play()即可，原理估計是動了dom結構绢涡，相當于執(zhí)行了一次交互牲剃。(有人也用過createEvent模擬，原理也是動了dom雄可。)
因此凿傅，記得暴露一個音樂關閉/打開的按鈕，不然肯定被用戶罵死数苫。
(6)有趣的loading
Loading頁還是要有的聪舒，萬一用戶網(wǎng)速慢呢？
以上做了那么多事文判，如果沒有資源加載都是玩不來的过椎，因此還需要一個loading的支持。一般情況下頁面體積大于3m則要加上loading頁戏仓。
然而loading還是可以做得很有趣的疚宇，一般的做法是：
1.引入品牌，例如APP宣傳頁;
2.引入有趣動畫赏殃，放一個賤賤的人物跳舞給你看;
3.一切從簡敷待，用CSS3簡單動畫。
這是空間5.0預約頁第二版仁热，使用了以上的若干方法論榜揖，例如loading動畫，CSS3動畫抗蠢，SVG星空連線举哟，首屏星球重力感應，音樂(這里使用開啟按鈕后播放)等等迅矛。
(由于活動已結束妨猩，很多運營處都被刪掉從簡了，忽略那些細節(jié))
(查看DEMO)
當然秽褒，真正要做到高效制作動態(tài)H5頁面壶硅，還是靠積累威兜，因此平時做好的細節(jié)動畫自己都積累起來，下次分分鐘就能用得上庐椒。
二椒舵、優(yōu)化
前面說的是讓頁面動起來的一些小技巧。
而頁面動起來的根基是功能可用的頁面约谈，因此有必要分享一些優(yōu)化細節(jié)的技巧和方向笔宿，熟悉掌握一些方法論還是會對頁面開發(fā)大大提高效率的，并且也能防止疏忽缺漏窗宇。
(1) 動畫雪碧圖
涉及的動畫十分多措伐，用的元素也十分多，請務必使用雪碧圖(Sprite)军俊！
網(wǎng)上的工具有一些可以幫助你生成雪碧圖的工具侥加，例如CssGaga，GoPng等等粪躬，自動化構建工具Grunt和Gulp也提供了相應插件担败。
特別地，如果單張雪碧圖面積實在太大镰官，可以拆分雪碧圖提前，例如拆分成2-4張，因為現(xiàn)代瀏覽器都支持4-6個同源請求下載泳唠，若資源實在太多狈网，也可以考慮把靜態(tài)資源放在不同源域名下去請求，這里犧牲多幾個請求換來圖片同時加載比一張圖片慢慢加載要好笨腥，當然拓哺，這需要具體情況去衡量。
順便提一下脖母，我寫動畫的一個小技巧是把每一頁的動畫分在一個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的頁面在輸出之前經(jīng)過組裝-壓縮的步驟脚仔。
(2) 圖片壓縮
圖片壓縮是老生常談，但是仍然有不少人忘記壓縮舆绎，那可是活生生的帶寬和流量的浪費啊…
壓縮圖片需要有好工具鲤脏，有智圖，TinyPNG亿蒸，JPEGmini等等凑兰。
依靠工具外，還有以下方式可以優(yōu)化圖片：
1.盡量避免用PNG24边锁。如果圖片色彩要求不高姑食，請使用PNG8;
2.使用新格式，WEBP和BPG等新格式的到來茅坛，在不用考慮兼容的情況下請大膽嘗試;
3.用SVG和ICONFONT代替簡單的圖標;
4.用FUFU的字蛛來代替藝術字體切圖音半。
(3)多終端兼容
多終端兼容是一切的根基，要知道有人拿著腎6+贡蓖，有人拿著腎4曹鸠，大則414×736，小則320×416(IPHONE4在SAFARI保留上下端導航)斥铺，因此多終端兼容是十分必要的彻桃。
曾經(jīng)有一種派系為320派系，就是大部分頁面都是320寬度晾蜘，因此干脆直接用320的容器來包一切頁面邻眷，那樣也簡單，然而IPHOEN6和IPHONE6+的出現(xiàn)簡直是滅了這個派系剔交。
那么到底要如何兼容呢？
這里我分了三個時期來說說：
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.小屏適當去掉一些元素噩峦，例如一些翻頁提示锭沟，一些多余圖標，可以讓優(yōu)雅降級识补，把它們 display:none掉族淮。
有以上幾步，基本就能兼容大部分機器了李请。兼容一直是個苦活瞧筛，但是這是前端必修課，多練就會發(fā)覺其實也沒有那么難嘛导盅。
(4)交互提示
前面說了较幌，加了音效就要加上音樂切換開關的按鈕，不然會被用戶罵死白翻。還有其他乍炉，例如如果你的頁面不能兼容橫屏，請監(jiān)聽橫屏狀態(tài)滤馍，然后加上適當?shù)臋M屏提示岛琼。
例如：
// 橫屏監(jiān)聽
var updateOrientation = function(){
if(window.orientation=='-90' || window.orientation=='90'){
$('.landscape-wrap').removeClass('hide');
console.log('為了更好的體驗，請將手機/平板豎過來巢株！');
}else{
$('.landscape-wrap').addClass('hide');
console.log('豎屏狀態(tài)');
}
};
window.onorientationchange = updateOrientation;
復制代碼
提示越多槐瑞，界面越友好，有時候設計師會漏掉一些可能出現(xiàn)的頁面情況阁苞。
作為有態(tài)度的前端困檩，請好好把關，讓用戶有好的體驗那槽。
(5)分享接口
H5做好了悼沿，要傳播分享才能展示你的牛逼轟轟。
然而分享其實是個坑骚灸，分享到微信糟趾、手Q等都有各種問題。
A.微信
舊微信會使用WeixinJSBridge來聲明分享的縮略圖、標題义郑、正文等蝶柿，比較方便。例如：
而最新的微信提供了新的微信SDK非驮，需要在公眾賬號綁定所屬域名之后調用SDK作分享只锭，可以說分享功能會更加強大，坑也會更加少院尔。
B.手Q
手Q支持聲明meta標簽的的分享方式，例如：
而若在qq.com域名下也支持api的定義方式喉誊。
C.一般化分享
在默認兼容舊版微信邀摆、手Q或者各種瀏覽器，平臺伍茄，可以用這樣的方法：
寫h1做標題栋盹，p做內容，img做縮略圖敷矫，只需要把h1隱藏掉就好例获，這里的縮略圖最好要大于200x200px。
例如：
當然曹仗，這樣也有利于搜索引擎拉取信息榨汤。
分享的坑還有更多，例如不同瀏覽器例如QQ瀏覽器怎茫、Chrome也會有自己的默認拉取方式(部分截圖作縮略圖)收壕，需要多加測試優(yōu)化。
(6)SEO搜索引擎優(yōu)化
SEO(搜索引擎優(yōu)化)的基本做法是把頁面結構寫好轨蛤，這包括：
1.定義精確的網(wǎng)頁標題蜜宪。你的標題應該有概括性，能明確告知搜索引擎和用戶你的網(wǎng)站大概內容和目的祥山，可以是當前頁面標題-所屬類型-產(chǎn)品名圃验，例如“全民來猜歌-年費黃鉆-QQ空間”。
2.針對頁面內容補充description和keywords的meta標簽缝呕。你需要簡短總結頁面的主要目標澳窑，然后補充description，以及根據(jù)關鍵詞補充keywords岳颇。
3.優(yōu)化你的超鏈接和圖片照捡。包括優(yōu)化超鏈接顯示的文本，要具有語義性也要跟超鏈接的網(wǎng)頁具有相關性话侧，例如“空間主頁”就不要鏈接到“www.qq.com”栗精。同時，要補充”title”和”alt”屬性，例如“”悲立。
4.建立良好的網(wǎng)站導航和sitemap鹿寨。網(wǎng)站需要有一個良好的導航，控制根目錄和各子目錄的關鍵薪夕，通過sitemap可以幫助網(wǎng)站主了解網(wǎng)站結構脚草，也方便搜索引擎收錄整個站點。
5.優(yōu)化目錄結構和URL原献。你的URL應該有語義性馏慨，簡短易懂，例如http://www.apple.com/macbook-air/姑隅，而且每一層級都要有它對應的頁面展示以及語義写隶。
6.善用h1-h6的標題結構樹。合理的標題可以強調文字讲仰，也能讓搜索引擎更加了解到各標題的重要性慕趴，因此建立良好的標題樹十分有意義。
7.不斷致力于提供優(yōu)質的內容鄙陡。社交化分享是網(wǎng)站曝光最快的因素冕房，因此不斷提供了優(yōu)質原創(chuàng)內容才能真正提高你的網(wǎng)站曝光權重。
(7)無障礙
無障礙的普及是一件好事趁矾，這讓互聯(lián)網(wǎng)真正地為所有人可用耙册。因此我們也應該為之而努力，無障礙的根基是你頁面強壯的語義性和結構性毫捣，具體可以參考《騰訊網(wǎng)無障礙說明》了解無障礙的優(yōu)化手段觅玻。
via: 騰訊ISUX
