那些H5用到的技術（3）——屏幕場景滑動

前言
Swiper.js
一些須要咱們手動設置的參數
排版元素須要設置position:absolute絕對元素定位
swiperAnimate方法的使用
動畫播放完成以後的監聽
上滑提示
屏幕適配的問題
Animate.css
stylie
velocity.js
總結

前言

如今已經有許多公司開發了各類在線H5製做工具平臺，能夠快速製做簡單的移動端H5頁面，主要仍是展現營銷，我隨便百度了一個，效果看起來以下所示：

瞬間高大上的感受有沒有，可是這類的的工具通常交互都比較簡單，大多都只是基本的滑動特效，好處就是能夠快速的將設計稿轉化，雖然也須要切圖上傳排版，但總比代碼手動調整的好，並且全程可視化操做，缺點是很難作到深度互動，而源碼基本都是加密的，導出使用還挺麻煩，因此要嘛付費高級版，要嘛定製，這樣溝通和製做成本都會變高，考慮到公司內部之後會常常用到一些H5，索性本身研究一番，後面能夠考慮弄成通用模板。

查了許多資料，目前絕大多數H5都是基於swiper.js！！！

Swiper.js

官方地址：https://github.com/nolimits4web/Swiper
國內地址：http://www.swiper.com.cn/
固然swiper不只僅能夠用戶移動網站，目前不少PC端企業官網動態效果也均可以基於此插件實現，相似的還有FullPage.js

官網網站裏面已經有很詳細的教程了，參考示例使用便可，下面我主要講一些開發過程當中遇到的坑。

一些須要咱們手動設置的參數

一、swiper-container的width和height
一開始用的時候會發現代碼按照教程設置好了，可是滑動的時候怎麼會漂移，並且樣式怪怪的。
這個時候須要咱們主動設置width和height

 
 
 
 

  
  
  
  

  
  
  
  

  
  
  
  

  
  
  
  

  
  
  
  

  
  
  
  

  
  
  
  

  
  
  
  

  
  
  
  

  
  
  
  

 
 
 
 
 .swiper-container { width: 100%; height: 100%; left: 0%; top: 0%; margin: 0; border-radius: 0px; position: relative; /*background-color: rgba(0, 0, 0, 0.5);*/ }

二、direction: 'vertical'
默認狀況是橫向滑動的，而咱們手機通常是豎着滑動的

排版元素須要設置position:absolute絕對元素定位

默認swiper的css中.swiper-slide樣式已經設置成了position:relative，每一個頁面的元素固然是須要以父級爲基準顯示，因此每一個頁內元素都要設置成position:absolute，這樣就能夠經過絕對定位來按照設計稿排版了。

在CSS中關於定位的內容是：
static(靜態) 沒有特別的設定，遵循基本的定位規定，不能經過z-index進行層次分級。
relative(相對定位) 對象不可層疊、不脫離文檔流，參考自身靜態位置經過 top,bottom,left,right 定位，而且能夠經過z-index進行層次分級。
absolute(絕對定位) 脫離文檔流，經過 top,bottom,left,right 定位。選取其最近一個最有定位設置的父級對象進行絕對定位，若是對象的父級沒有設置定位屬性，absolute元素將以body座標原點進行定位，能夠經過z-index進行層次分級。
fixed（固定定位） 這裏所固定的參照對像是可視窗口而並不是是body或是父級元素。可經過z-index進行層次分級。

swiperAnimate方法的使用

默認狀況下，swiper是不會自動播放動畫的，當設置好動畫效果attribute以後

 
 
 
 

  
  
  
  

 
 
 
 
swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s"

還須要調用swiperAnimate纔會讀取執行，因此須要在onSlideChangeEnd事件裏主動調用此函數。
或者你須要從新執行動畫效果，均可以調用此函數。

動畫播放完成以後的監聽

有時候咱們須要連貫的動畫效果，好比，淡入以後，播放另一個動畫，首要任務就是監聽動畫完成事件

代碼以下：

 
 
 
 

  
  
  
  

  
  
  
  

  
  
  
  

  
  
  
  

  
  
  
  

 
 
 
 
//one僅執行一次，on永久綁定$('.swiper-slide:eq(0) img').on('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function() { $(this).removeClass('animated fadeInUp bounceInRight'); $('.swiper-slide:eq(0) img').addClass('animated tada');});

其實相似的這樣連貫的動效能夠不用代碼作什麼監聽，我這麼作的主要緣由是，動畫效果直接用animate.css的便可，不然本身寫效果也很麻煩，好在已經有開源在線工具能夠編輯動畫導出css了，見下文

上滑提示

默認狀況只有pagination分頁器，就是下面的小圓圈，swiper還自帶了幾個樣式。

因此這個提示是須要咱們本身敲代碼的，見demo，樣式以下

屏幕適配的問題

這是一個比較棘手的問題，根據我經驗來講，解決方案有3種，各有利弊，固然也能夠混合使用。
一、百分比響應式
這是我常常採用的方案，能夠實現動態自適應，讓瀏覽器本身計算，比較適合全都是圖片的狀況。理論上只要高寬比正確，元素就不會跑偏或拉伸。
若是高寬比不一致，我會在js裏計算比如例，先設置body的max-width和max-height，而後按比例經過高度計算設置body的height和width（由於通常都是屏幕過寬），除非有橫豎屏切換

二、rem
經過@media only screen and (max-width)來指定機型，自行計算設置相應的rem便可實現自適應，並且字體也能夠根據rem值設置大小，理論上只要花夠時間作適配，能夠100%適配全部機型。

三、transform
和viewport的原理同樣，而viewport進行縮放是對整個可視區的縮放，因此高寬比是不能變的。
而transform是針對內部每一個元素，進行縮放，會根據原始比例自動拉伸高寬，其中還包括文字。
參考代碼以下（摘自swiper官方示例）：

 
 
 
 

  
  
  
  

  
  
  
  

  
  
  
  

  
  
  
  

  
  
  
  

  
  
  
  

  
  
  
  

  
  
  
  

  
  
  
  

  
  
  
  

  
  
  
  

  
  
  
  

  
  
  
  

  
  
  
  

  
  
  
  

 
 
 
 
scaleW=window.innerWidth/320;scaleH=window.innerHeight/480;var resizes = document.querySelectorAll('.resize'); for (var j=0; j<resizes.length; j++) { resizes[j].style.width=parseInt(resizes[j].style.width)*scaleW+'px'; resizes[j].style.height=parseInt(resizes[j].style.height)*scaleH+'px'; resizes[j].style.top=parseInt(resizes[j].style.top)*scaleH+'px'; resizes[j].style.left=parseInt(resizes[j].style.left)*scaleW+'px';  }var scales = document.querySelectorAll('.txt');for (var i=0; i<scales.length; i++) { ss=scales[i].style; ss.webkitTransform = ss.MsTransform = ss.msTransform = ss.MozTransform = ss.OTransform =ss.transform='translateX('+scales[i].offsetWidth*(scaleW-1)/2+'px) translateY('+scales[i].offsetHeight*(scaleH-1)/2+'px)scaleX('+scaleW+') scaleY('+scaleH+') ';}

Animate.css

官方地址：https://daneden.github.io/animate.css/
swiper的默認動畫就是用的Animate.css，裏面的效果很是多，但僅僅是一些簡單的特效而已，那如何快速根據需求製做出本身的動畫效果呢？它就是stylie！

stylie

官方地址：http://jeremyckahn.github.io/stylie/
可視化的動畫編輯器，添加關鍵幀便可，可是這也僅僅是單一動畫的製做。

有時候爲了達到更好的效果，確實須要在H5上播放動畫（視頻和gif都不考慮），用上面的工具+切圖+寫代碼要搞死前端開發！
好在已經有同窗分享了經驗，參考《H5動畫開發快車道》
原理就是經過Animate CC導出html，而後咱們再引用，這樣就能夠由設計人員直接導出給前端接入便可，方便你我他。

velocity.js

官方地址：http://velocityjs.org/
有時候咱們還有這樣的需求，動態計算設置動畫，stylie是預先生成好的，直接設置CSS工做量又很是的，jquery自己自帶animate方法，可是效率實在過低，手機上卡頓狀況嚴重，velocity.js就派上用場了，固然，通也可使用它經過簡單的代碼快速實現動畫特效。

velocity.js 是一個簡單易用、高性能、功能豐富的輕量級JS動畫庫。它能和 jQuery 完美協做，並和$.animate()有相同的 API， 但它不依賴 jQuery，可單獨使用。 Velocity 不只包含了$.animate()的所有功能， 還擁有：顏色動畫、轉換動畫(transforms)、循環、 緩動、SVG 動畫、和 滾動動畫 等特點功能。

它比$.animate()更快更流暢，性能甚至高於 CSS3 animation， 是 jQuery 和 CSS3 transition 的最佳組合，它支持全部現代瀏覽器，最低可兼容到 IE8 和 Android 2.3。

原理簡單來講，就是velocity.js沒有使用到css的 transition，而是用requestAnimationFrame經過js代碼來控制動畫

總結

經過swiper.js再加上前面的代碼結合在一塊兒，咱們基本就實現了一個完整的H5展現頁面，包括素材加載，背景音樂播放，頁面滑動。到目前爲止，其實咱們大多數時間都在寫業務邏輯的代碼，輪子什麼的早都已經有現成的了，真感謝開源的世界，人人爲我，我爲人人，極大促進了科技的進步吶，正所謂站在巨人的肩膀上，後面有空也許我會基於此框架寫一個本地的H5編輯器，也開源貢獻出來。

demo地址：
https://github.com/leestar54/h5-demo/blob/master/swiper.html