前言
隨著 Hybrid 應用的豐富，HTML5 工程師們已經不滿足于把桌面端體驗簡單移植到移動端，他們覬覦移動原生應用人性化的操作體驗，特別是原生應用與生俱來的豐富的手勢系統。HTML5 沒有提供開箱即用的手勢系統，但是提供了更底層一些的對 touch 事件的監聽。基于此，我們可以做出自己的手勢庫。
手勢
常用的 HTML5 手勢可以分為兩類，單點手勢和兩點手勢。單點手勢有 tap(單擊)，double tap(雙擊)，long tap(長按)，swipe(揮)，move(移動)。兩點手勢有 pinch(縮放)，rotate(旋轉)。
接下來我們實現一個檢測這些手勢的 javaScript 庫，并利用這個手勢庫做出炫酷的交互效果。
移動
關于移動手勢檢測我們這里不再贅述。總結一下就是在每次touchmove事件發生時，把兩個位移點之間的坐標位置相減，就可以了。
單擊(tap)
手勢檢測的關鍵是用 touchstart，touchmove，touchend 三個事件對手勢進行分解。
那么怎么分解單擊事件呢?
- 在 touchstart 發生時進入單擊檢測，只有一個接觸點。因為單擊事件限制為一個手指的動作。
- 沒有發生 touchmove 事件或者 touchmove 在一個很小的范圍(如下圖)。限制 touchmove 在一個很小范圍，是為了給用戶一定的冗余空間，因為不能保證用戶手指在接觸屏幕的時候不發生輕微的位移。
3.touchend 發生在 touchstart后的很短時間內(如下圖)。這個時間段的閾值是毫秒級，用來限制手指和屏幕接觸的時間。因為單擊事件從開始到結束是很快的。
有了上面的流程，就可以開始實現 tap 事件監測了。
_getTime() {
return new Date().getTime();
}
_onTouchStart(e) {
//記錄touch開始的位置
this.startX = e.touches[0].pageX;
this.startY = e.touches[0].pageY;
if(e.touches.length > 1) {
//多點監測
...
}else {
//記錄touch開始的時間
this.startTime = this._getTime();
}
}
_onTouchMove(e) {
...
//記錄手指移動的位置
this.moveX = e.touches[0].pageX;
this.moveY = e.touches[0].pageY;
...
}
_onTouchEnd(e) {
let timestamp = this._getTime();
if(this.moveX !== null && Math.abs(this.moveX - this.startX) > 10 ||
this.moveY !== null && Math.abs(this.moveY - this.startY) > 10) {
...
}else {
//手指移動的位移要小于10像素并且手指和屏幕的接觸時間要短語500毫秒
if(timestamp - this.startTime < 500) {
this._emitEvent('onTap')
}
}
}
雙擊(double tap)
和單擊一樣，雙擊事件也需要我們對手勢進行量化分解。
【網站聲明】本站除付費源碼經過測試外，其他素材未做測試，不保證完整性，網站上部分源碼僅限學習交流，請勿用于商業用途。如損害你的權益請聯系客服QQ：2655101040 給予處理，謝謝支持。