前端編程提高之旅（十八）----移動端web流行交互技術方案研究

   在停止實習後，生活最大變化在於沒有項目的壓力，可以根據興趣場景，探索技術實現。這個過程對於個人來說，動力自內而外，需求自上而下，都由個人把握。

   生活在移動互聯網井噴的今天，同時又關注前端技術，平常對微信端流行的交互（或者說玩法）有着特殊的敏感性。如果說之前接觸MVC框架還是對單頁面網站、CSS3前沿特效有一個概念的話，微信朋友圈及好友分享網頁，則把國內網頁構建的流行趨勢，從幕後推向前臺。

   樂帝通過研究移動端web流行交互，構建起了一個初步可行的技術方案，用來實現單頁面與DOM動畫。在這個過程中樂帝對於單頁面概念、動畫、技術通用實現等，有了更深層次理解。

一、研究背景及現實需求

   1.研究背景

    如上所述，微信端朋友圈或好友消息中，分享的複雜交互的網頁有兩個特點：單頁面切換與DOM元素特效。採用以上技術常見應用場景有：宣傳、答題、講故事。從本質上說，移動端採用如上兩種交互形式，更像是替代flash在PC端的功能。單頁面對應動畫中的分幀的概念，DOM元素特效則對應動畫中各種特效。

   2.現實需求

   如果說樂帝對前端技術的敏感算一點現實需求的話，那麼樂帝近期做的答題項目以及爲高中校友做一個給客戶的新年祝福，更是迫切的需求。

   樂帝答題項目交互做的很簡單，不斷實現DOM的顯示與隱藏，這正是對應動畫分幀的功能。採用頻繁的DOM操作，來不斷進行view的切換，顯然可以更加自動化。同時進入每個view頁面可以更加絢麗多變，由此構成研究的現實需求。

二、技術研究點及研究過程

   1.技術研究點

    如研究背景和需求所述，主要研究點爲單頁面切換與CSS3特效。在這兩個研究點之外，還有一個對於瀏覽器全屏功能的研究，此研究點主要基於新年祝福項目中，樂帝考慮到爲與PPT展現方式保持一致，需要有個全屏功能。

   2.研究過程

   首先通過搜索引擎搜索相關技術，這裏樂帝推薦兩個技術源：jQuery插件庫網站與夢想天空博客園博客。

   通過以上搜索確定了四個庫或插件備選：

• 瀏覽器全屏插件：jquery.fullScreen.js
• 全屏滾動頁面切換插件：pagePiling.js
• DOM元素動畫類庫：WOW.js
• 文本動畫插件：Textillate.js

   有了以上四個備選，逐個研究，最後確定技術方案。

三、研究詳細過程

   樂帝研究順序依次是：全屏插件、DOM元素動畫類庫、全屏滾動。

   1.全屏插件的研究

   樂帝通用研究順序可以表述爲:閱讀API、查看代碼例子並作修改、應用到項目中。

   首先閱讀了全屏API實現原理，由此篇文章在DOM元素數據結構中確定了全屏API的位置。

   通過這半年對可視化的研究，樂帝考慮技術問題更多是從數據結構層次理解，還是有不少心得體會。全屏API構建如下：

   研究jQuery全屏插件，發現插件文檔不全，不能預期實現全屏切換。於是通讀了此插件源碼，源碼實現非常簡單：

   閱讀完源碼，即可根據需要，修改全屏插件，實現個性化定製。但後期樂帝考慮到，全屏除了視頻使用場景外，網頁還是非常不符合用戶習慣的，後期技術方案並沒有涉及此插件。但此研究過程，還是非常值得以後借鑑。

   2.DOM元素動畫類庫的研究

   樂帝本想除了WOW.js，再研究下文字特效框架Textillate.js，但考慮到文字特效本質上，也在DOM特效範疇內，就沒有進一步單獨研究文字特效。

   WOW.js採用了CSS3與jQuery動畫互爲依託，保證了兼容性。WOW.js作爲類庫，功能非常底層，用於構建動畫要解決兩個問題：

• 構造成幀，需要對DOM動畫執行狀態進行判斷。
• 如採用事件監聽成幀，需要不斷加深嵌套，代碼耦合性過高。

  爲解決如上問題，樂帝採取瞭如下解決方案：

• 通過查找API例子，瞭解到動畫監聽事件：開始、結束、迭代。由此有了動畫執行狀態的判斷。解決了成幀的問題。
• 通過採用單頁面插件，每個view作爲場景，由此用於減輕嵌套層級的問題。

   解決如上問題樂帝構建了採用WOW.js構建動畫的方案：

   並對常用動畫做了分類：

   3.全屏滾動頁面切換插件研究

   通過研究pagePiling.js，此插件API基於狀態構建：

   API寫法非常類似單頁面框架，代碼書寫會更優雅，此插件用於構建動畫中對應場景。

四、技術方案研究結果

   通過以上研究確定了以WOW.js構建場景內幀動畫、以pagePiling.js構建場景的技術方案。

   以此方案構建的簡單新年祝福應用下載地址爲：http://download.csdn.net/detail/yingyiledi/8281101

五、研究的抽象過程

  樂帝回顧整個研究抽象過程如下：需求、技術選型、API閱讀並結合例子修改、應用到項目中。