【轉】量產小動畫

原文地址 http://www.cocoachina.com/webapp/20150616/12158.html

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

TIPS2 CSS3細節強調動畫

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

分兩種狀況：

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

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

TIPS3 SVG動畫

先介紹咱們組的一個PS插件svgArtisan（該工具還沒主頁，暫時放在雲盤），這個工具能夠直接根據PSD的路徑圖層生成SVG圖形。

接下來就簡單了，先用插件生成線條的SVG，例如是這樣的：

 

                                             

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

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

TIPS4 重力陀螺儀

想讓頁面更有層次感，不妨讓設計提供一些碎片元素，例如彩花，星星之類，而後把它們單獨切出來放畫面前景，使用陀螺儀伴隨着手機運動碎片也跟着運動，多麼好玩！

這裏提供一個工具能夠輕鬆實現陀螺儀重力效果的：parallax.js。

用法簡單，定義一個parallax-obj的父類，把須要動的元素加上layer的類，而後設置動的範圍data-depth：

      

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

TIPS5 背景音樂&音效

H5頁面要炫酷，畫面生動仍是不夠的，必定要配合生動的音樂。所以能夠主動跟設計或產品溝通，讓他們能夠提供音樂資源，分分鐘致使UV猛漲有木有！

固然，有了音樂，前端也不是直接引用的，仍是有點要求：

1.音樂不宜過長，30s爲佳，並且音樂要加上漸現漸隱效果，方便循環播放；

2.音樂體積要小，音質和流量，在手機上仍是優先考慮流量吧。

通常背景音樂體積能夠接受的範圍是200K如下，若太大，可使用格式工廠等軟件，下降它的比特率和聲道來改變體積。

接着，只須要簡單引用：

這裏有個問題，iOS是不能自動播放音樂的，必定要觸發一個用戶交互事件，例如點擊，可是有一種自創的hack方法能夠規避：

經過new一張圖片，監聽一張圖片的onload事件，結束後回調執行音頻播放audio.play()便可，原理估計是動了dom結構，至關於執行了一次交互。

最後，記得暴露一個音樂關閉/打開的按鈕，否則確定被用戶罵死(°?°?)。

TIPS6 有趣的loading

Loading頁仍是要有的，萬一用戶網速慢呢？

以上作了那麼多事，若是沒有資源加載都是玩不來的，所以還須要一個loading的支持。

然而loading仍是能夠作得頗有趣的，通常的作法是：

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

2.引入有趣動畫，放一個賤賤的人物跳舞給你看；

3.一切從簡，用CSS3簡單動畫。

查看DEMO（電腦上用Chrome模擬手機打開）

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

在繼續看下面的文字（頁面優化技巧）以前，先問一個問題，若是仍是感到頁面很無趣怎麼辦？

這裏提供一些工（gan）具（huo）吧：
1.OneDiv，這是個神奇的網站，裏面的全部細節都是用一個div元素經過複雜的Css3實現的，有空能夠去開開腦洞噢；

2.貝塞爾曲線生成器，動畫速率太平怎麼辦？果斷使用貝塞爾曲線來調節動畫，這個網站能夠幫你生成可視化的曲線。

還有各類神奇工具，還待大家本身發掘，我就不所有列出鳥。

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

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

TIPS1 動畫雪碧圖

涉及的動畫十分多，用的元素也十分多，請務必使用雪碧圖（Sprite）！

網上的工具十分多，例如濤哥（ytzong）的CssGaga，AlloyTeam的GoPng等等，自動化構建工具Grunt和Gulp也提供了相應插件。

這裏要提一下的是若是頁面圖片實在太多，能夠分雪碧圖，例如分紅1-3張，由於三張圖片是能夠同時加載的，這裏犧牲多2個請求換來圖片同時加載比一張圖片慢慢加載要好。

順便提一下，我寫動畫的方法是每一頁的動畫分在一個import.css裏面，而後最後在主樣式中import進去，這樣方便調試動畫，也容易區分雪碧圖，例如：

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，按範圍兼容機型。

2.類覆蓋，這種方式適合直接爲小屏或大屏作總體兼容。

首先，爲小屏（大屏）加一個識別類，這裏小於420表示爲小屏幕（IPHONE4有上下導航欄）：

1 2 3 4 5

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

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

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

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

1.大屏適當用zoom:倍率或者transform:scale(倍率)來增大元素，實測失真根本看不出來，設計師也滿意（畢竟不用多作一張圖( ? ?ω?? )）；

2.小屏適當去掉一些元素，例如一些翻頁提示，一些多餘圖標，可讓優雅降級，把它們 display:none掉。

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

TIPS4 交互提示

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

例如：

1 2 3 4 5 6 7 8 9 10 11

// 橫屏監聽 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結構，這是玩轉頁面的基礎。