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

**在停止實習后，生活最大變化在于沒有項目的壓力，可以根據興趣場景，探索技術實現。這個過程對于個人來說，動力自內而外，需求自上而下，都由個人把握。** **生活在移動互聯網井噴的今天，同時又關注前端技術，平常對微信端流行的交互（或者說玩法）有著特殊的敏感性。如果說之前接觸MVC框架還是對單頁面網站、CSS3前沿特效有一個概念的話，微信朋友圈及好友分享網頁，則把國內網頁構建的流行趨勢，從幕后推向前臺。** **樂帝通過研究移動端web流行交互，構建起了一個初步可行的技術方案，用來實現單頁面與DOM動畫。在這個過程中樂帝對于單頁面概念、動畫、技術通用實現等，有了更深層次理解。** **一、研究背景及現實需求** **1.研究背景** **如上所述，微信端朋友圈或好友消息中，分享的復雜交互的網頁有兩個特點：單頁面切換與DOM元素特效。采用以上技術常見應用場景有：宣傳、答題、講故事。從本質上說，移動端采用如上兩種交互形式，更像是替代flash在PC端的功能。單頁面對應動畫中的分幀的概念，DOM元素特效則對應動畫中各種特效。** **2.現實需求** **如果說樂帝對前端技術的敏感算一點現實需求的話，那么樂帝近期做的答題項目以及為高中校友做一個給客戶的新年祝福，更是迫切的需求。** **樂帝答題項目交互做的很簡單，不斷實現DOM的顯示與隱藏，這正是對應動畫分幀的功能。采用頻繁的DOM操作，來不斷進行view的切換，顯然可以更加自動化。同時進入每個view頁面可以更加絢麗多變，由此構成研究的現實需求。** **二、技術研究點及研究過程** **1.技術研究點** **如研究背景和需求所述，主要研究點為單頁面切換與CSS3特效。在這兩個研究點之外，還有一個對于瀏覽器全屏功能的研究，此研究點主要基于新年祝福項目中，樂帝考慮到為與PPT展現方式保持一致，需要有個全屏功能。** **2.研究過程** **首先通過搜索引擎搜索相關技術，這里樂帝推薦兩個技術源：[jQuery插件庫網站](http://www.jq22.com/)與[夢想天空博客園博客](http://www.cnblogs.com/lhb25/p/must-read-links-for-web-designers-and-developers-volume-12.html)。** **通過以上搜索確定了四個庫或插件備選：** - 瀏覽器全屏插件：[jquery.fullScreen.js](https://github.com/dyygtfx/jquery.fullScreen.js) - 全屏滾動頁面切換插件：[pagePiling.js](https://github.com/alvarotrigo/pagePiling.js) - DOM元素動畫類庫：[WOW.js](http://mynameismatthieu.com/WOW/docs.html) - 文本動畫插件：Textillate.js **有了以上四個備選，逐個研究，最后確定技術方案。** **三、研究詳細過程** **樂帝研究順序依次是：全屏插件、DOM元素動畫類庫、全屏滾動。** **1.全屏插件的研究** **樂帝通用研究順序可以表述為:閱讀API、查看代碼例子并作修改、應用到項目中。** **首先閱讀了[全屏API實現原理](http://blog.csdn.net/tywali/article/details/8623938、)，由此篇文章在DOM元素數據結構中確定了全屏API的位置。** **![](https://box.kancloud.cn/2016-02-24_56cd5e4a838db.png)** **![](https://box.kancloud.cn/2016-02-24_56cd5e4a976de.png)** **通過這半年對可視化的研究，樂帝考慮技術問題更多是從數據結構層次理解，還是有不少心得體會。全屏API構建如下：** **![](https://box.kancloud.cn/2016-02-24_56cd5e4aa76fb.png)** **研究[jQuery全屏插件](https://github.com/dyygtfx/jquery.fullScreen.js)，發現插件文檔不全，不能預期實現全屏切換。于是通讀了此插件源碼，源碼實現非常簡單：** **![](https://box.kancloud.cn/2016-02-24_56cd5e4ac4f9c.png)** **閱讀完源碼，即可根據需要，修改全屏插件，實現個性化定制。但后期樂帝考慮到，全屏除了視頻使用場景外，網頁還是非常不符合用戶習慣的，后期技術方案并沒有涉及此插件。但此研究過程，還是非常值得以后借鑒。** **2.DOM元素動畫類庫的研究** **樂帝本想除了WOW.js，再研究下文字特效框架Textillate.js，但考慮到文字特效本質上，也在DOM特效范疇內，就沒有進一步單獨研究文字特效。** **WOW.js采用了CSS3與jQuery動畫互為依托，保證了兼容性。WOW.js作為類庫，功能非常底層，用于構建動畫要解決兩個問題：** - 構造成幀，需要對DOM動畫執行狀態進行判斷。 - 如采用事件監聽成幀，需要不斷加深嵌套，代碼耦合性過高。 **為解決如上問題，樂帝采取了如下解決方案：** - 通過查找API例子，了解到動畫監聽事件：開始、結束、迭代。由此有了動畫執行狀態的判斷。解決了成幀的問題。 - 通過采用單頁面插件，每個view作為場景，由此用于減輕嵌套層級的問題。 **解決如上問題樂帝構建了采用WOW.js構建動畫的方案：** **![](https://box.kancloud.cn/2016-02-24_56cd5e4c34a73.png)** **并對常用動畫做了分類：** **![](https://box.kancloud.cn/2016-02-24_56cd5e4c570a6.png)** **3.全屏滾動頁面切換插件研究** **通過研究pagePiling.js，此插件API基于狀態構建：** **![](https://box.kancloud.cn/2016-02-24_56cd5e4c7b60c.png)** **API寫法非常類似單頁面框架，代碼書寫會更優雅，此插件用于構建動畫中對應場景。** **四、技術方案研究結果** 通過以上研究確定了以WOW.js構建場景內幀動畫、以pagePiling.js構建場景的技術方案。以此方案構建的簡單新年祝福應用下載地址為：[http://download.csdn.net/detail/yingyiledi/8281101](http://download.csdn.net/detail/yingyiledi/8281101) **五、研究的抽象過程** 樂帝回顧整個研究抽象過程如下：需求、技術選型、API閱讀并結合例子修改、應用到項目中。