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