近期H5項目開發小結

前言：2016差不多又過了半啦，最近參與了公司好幾個h5項目（嚴格來說，也只能算是推廣頁面活動）。主要是新品牌的推廣需要，當然也有給公司以前老客戶做的案例。今天主要總結下為新品牌開發的2個h5推廣；就主要的運用技術，頁面優化，以及存在的短板做總結。

一、主題與設計；

 2個h5主題主要與4.1愚人節與5月的母親節做對應；然后要比較婉轉自然地為新品牌作鋪墊，自然推廣是主要的目的，但是又不能那么直白明顯；所以2個h5分別選擇了虛擬產品介紹與游戲參與為設計思路；主要設計圖如下：

 愚人節：       掃描體驗；

母親節：     只能微信掃描體驗

2個h5 分別以流程展示和游戲互動參與為操作主線進行，在最后通過時節的特點（愚人節自然是整蠱咯，母親節則是溫馨情感）導向品牌網站。個人對UI的整體設計還是比較認可的。

 

一、主要的技術點與亮點；

 兩個h5的UE交互比較相似，所以在技術層面上也比較貼切。整體沒有太大的難度，與之前開發的H5互動頁面技術采用差別不大；不過創意總是無限的，根據設計師的設計理念，並與之交流后確定的交互展示方式算得上是這2個h5的一大亮點。圍繞效果對采用的技術作分析總結。

 

1.重力感應動畫效果，搖一搖；

　　項目里已不是第一次運用html5手機api，時至今日，幾乎所有智能手機都很好地支持了DeviceOrientation 和DeviceMotion 這個2個手機接口；根據設計配合了css3的transform動畫，營造了視覺差的效果；代碼實現也是比較簡單，單純地調用接口代碼即可；至於搖一搖動能，之前的文章也有提到過，so，不復贅述。

window.addEventListener('deviceorientation',  function(e) { var x = parseInt(e.gamma); var w = parseInt(0.4*x); if(Math.abs(x) < 80){ $('.p0_cen').css('webkitTransform',' translate3d('+0.8*w+'px,0px,0) rotate3d(0,1,0,' + 1*w + 'deg) '); $('.p0_tip').css('webkitTransform',' translate3d('+2*w+'px,0px,0) rotate3d(0,1,0,' + 1.2*w + 'deg) '); if($('.p1').hasClass('on')){ //p1
            $('.p1_bg').css('webkitTransform','translate3d('+1.5*w+'px,0px,-100px) rotate3d(0,1,0,' + 0.8*w + 'deg) scale(1.5)'); $('.p1_tit1').css('webkitTransform',' translate3d('+1.4*w+'px,0px,0) rotate3d(0,1,0,' + 1.5*w + 'deg) '); $('.p1_tit2').css('webkitTransform',' translate3d('+1*w+'px,0px,0) rotate3d(0,1,0,' + 1.5*w + 'deg) '); $('.p1_tit3').css('webkitTransform',' translate3d('+1.2*w+'px,0px,0) rotate3d(0,1,0,' + 1.2*w + 'deg) '); $('.p1_tit4').css('webkitTransform',' translate3d('+.7*w+'px,0px,0) rotate3d(0,1,0,' + 1*w + 'deg) '); $('.p1_bot').css('webkitTransform',' translate3d('+2*w+'px,0px,0) rotate3d(0,1,0,' + 0.6*w + 'deg) '); };  }; });

2.幀動畫，css spite，css animation；

　　頁面中的動畫效果主要還是由css3 的animation組成，比較直觀可控；由於設計的特殊性，需要用到大量仿真的場景動畫效果，這時候顯然是圖片輸出為主，盡管css sprite動畫也可以做到，不過對於大幀數的效果，一個是不易導出整張圖片，存儲大小過大，另外一點就是不利於網頁加載速度；所以用js控制images替換的幀動畫比較合適。當然，提前預加載圖片，時間控制，與音頻的同步也是需要注意的細節。

 

var barTimer = setInterval(function(){ if(num < 52){ var path = 'res/img/p5/all_000'+num+'.jpg'; $('.p5_anigla').attr('src',path); num++; }else{ clearInterval(barTimer); }; },50);

3.html5 <video>的使用；

　　由於母親節設計的原因，在初始loading完資源后會涉及到視頻的自動播放，好的一點是在微信內置瀏覽器里，可以自動播放，外置瀏覽器比如safari還是需要用戶交互才能執行，所以根據項目的運行環境還是需要做不同的事件處理；

　　另外一點值得注意的就是，在微信內置瀏覽器里非wp.weixin.com域名下的視頻資源，在安卓下引用會出現各種各樣的播放組件（比如播放完后會出現播放按鈕，視頻下方的進度條等；），ios暫無此等問題；所以，在運用視頻的時候就需要針對安卓用戶考慮是否接受這樣一個效果體驗；否則，還是做平台的不同處理吧。

4.移動自適應的優化；

　　此次還有一點就是針對以前的頁面適配問題再次作了一次普遍的優化；由於市面上的各種顯示屏大小，分辨率的存在，間可能減少在碼css的時候針對分辨率做媒體查詢；所以，結合網上的一些代碼案例，將之前的純rem，依靠screen width適配的方案進行了提升：

　　1）約定了基礎設計圖紙的大小；

　　2）根據屏幕高度采取了比例縮放，使得布局不再僅僅依據屏幕寬度做調整；

 

!function(win, option) { var count = 0, designWidth = option.designWidth, designHeight = option.designHeight || 0, designFontSize = option.designFontSize || 20, callback = option.callback || null, root = document.documentElement, body = document.body, rootWidth, newSize, t, self; //返回root元素字體計算結果
      function _getNewFontSize() { var scale = designHeight !== 0 ? Math.min(win.innerWidth / designWidth, win.innerHeight / designHeight) : win.innerWidth / designWidth; return parseInt( scale * 10000 * designFontSize ) / 10000; } !function () { rootWidth = root.getBoundingClientRect().width; self = self ? self : arguments.callee; //如果此時屏幕寬度不准確，就嘗試再次獲取分辨率，只嘗試20次，否則使用win.innerWidth計算
        if( rootWidth !== win.innerWidth &&  count < 20 ) { win.setTimeout(function () { count++; self(); }, 0); } else { newSize = _getNewFontSize(); //如果css已經兼容當前分辨率就不管了
          if( newSize + 'px' !== getComputedStyle(root)['font-size'] ) { root.style.fontSize = newSize + "px"; return callback && callback(newSize); }; }; }(); //橫豎屏切換的時候改變fontSize，根據需要選擇使用
      win.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", function() { clearTimeout(t); t = setTimeout(function () { self(); }, 200); }, false); }(window, { designWidth: 640, designHeight: 1136, designFontSize: 100, callback: function (argument) { /*console.timeEnd("test")*/ } });

 

三、缺陷與短板；

由於開發時間與進程等各種原因，幾個h5堆積起來也是蠻緊張的，即時基礎模板與樣式庫大同小異，不過還是聊下在各種調整與優化中出現的不足；

1.css3 3D動畫

　　1）很早之前的h5使用css3 3D animation的時候已經提出過這個問題，就是在ios系統上的ratateX，Y系列總會與頁面元素之間出現穿透遮擋的問題，一直沒有找到代碼層面的原因，究其根本還是瀏覽器自身的支持與解析造成的吧，總之安卓上webkit內核是沒有這種情況出現的；

不過問題還是要處理掉的，方法無非就是外層容器溢出隱藏：overflow:hidden;另外就是在z距上的translate ，再相應地scale縮放。

　　2）對3D變換的更深理解：不可或缺的perspective，意為透視，視角；正確使用將會給使用者在視覺上造成3D的視覺，主要表示的就是觀察者距離屏幕的px距離；正為前方觀察，負值為后方；

-webkit-perspective:620px;

 　　自然，你可以將這個屬性單獨設置到舞台容器上，也可以針對不同視覺效果單獨給元素添加；

　　3）還是那個老問題，針對低端安卓機，即使開啟了硬件加速，也會或多或少地出現動畫卡頓不流暢的情況，所以根據以后h5的設計趨勢，動畫效果占比越來越大，css3的動畫應該盡量少用，轉為canvas；

2.音視頻的控制

　　以后的H5幾乎都會有音視頻的加入吧，也算是一個整體流行趨勢，不管是吳亦凡H5 還是前段時間的寶馬M2，視頻的運用已經比較普遍；但是兼容性還是存在各種問題，比如（安卓不能同時播放2個多媒體，自動全屏播放，預加載，不同網絡狀況下的處理等等）；

所以考慮到以后的優化手段與開發效率，需要一些動畫庫來管理與處理，比如以前開發中使用過的craftyJs一類的動畫框架，最近也在研究騰訊TGideas的幾個 動畫H5，個人覺得creatJs這個類庫也是方案很好的解決途徑之一。

3.圖片處理

　　圖片上傳顯示也算是在移動網頁上，尤其是一些互動性h5常見的功能點，此次為了配合最后的大頭貼功能，也着實是對圖片壓縮適配做了不少工作；包括截取的自適應，熱區感應，位置對齊等，不過經過前幾個h5的經驗，最后還是比較完美地處理；不過手機瀏覽器對input的限制也是大不相同；有的安卓依舊不能選擇攝像頭即時拍照；編輯卡頓的現象。不過這也是很少在手機移動端出現圖片大功能編輯的原因之一，總之還是根據實際功能需求來調整。

 

結束語：現在的移動端H5熱潮差不多是一個穩定的階段，通俗一點就是爛大街了，不過依舊會有大廠的神來之筆出現讓人眼前一亮；微信衍生出來的這個移動平台也極大地推廣了移動web的發展；各種技術與創意也是層出不窮。

即使前段時間 騰訊放出的H5推廣瀏覽率分析，有點讓人開發者心灰意冷；但是也很好地說明了，技術與創新結合，想象力與設計，給用戶新穎舒適的體驗才能催發更優秀的作品。