用typescript開發(fā)手勢庫 - (1)web開發(fā)常用手勢有哪些?
這只是個(gè)開頭
說在最前面,本文是一個(gè)系列文章的開頭, 這個(gè)系列里我會(huì)講如何用typescript開發(fā)一款支持pc和手機(jī)端的手勢庫any-touch, 以及通過jest讓你的代碼測試覆蓋率100%.
[圖片上傳失敗...(image-4c466d-1560392265410)]
往期目錄
用 TypeScript 開發(fā)手勢庫 - (2)web開發(fā)常用手勢有哪些?
用 TypeScript 開發(fā)手勢庫 - (3)統(tǒng)一化Mouse和Touch事件
今天我們先不寫代碼
今天的文章里我們先不講代碼, 我們講一下都有哪些手勢以及手勢的邏輯, 理解了邏輯再寫代碼就簡單了.
感謝一定要寫在最前面
感謝開源的hammer.js, 是他讓我學(xué)會(huì)了很多手勢方面的知識(shí).
還要感謝寫這篇文章的作者,文章地址, 文章詳細(xì)介紹了關(guān)于旋轉(zhuǎn)和縮放手勢變化的計(jì)算.
那么常用手勢有哪些?
回到正題, 常見的手勢有: tap(點(diǎn)擊) \ press(按住) \ 拖拽(pan) \ 劃過(swipe) \ 捏合縮放(pinch) \ 旋轉(zhuǎn)(rotate), 所有的手勢在移動(dòng)端其實(shí)都是通過touch事件的不同觸發(fā)時(shí)機(jī)而區(qū)分出的(pc端是mouseup/mousemove/mousedown, 關(guān)于如何通過鼠標(biāo)識(shí)別手勢, 后面的文章會(huì)有單獨(dú)的章節(jié)).
這里有個(gè)demo, 我把所有的手勢識(shí)別放在了里面.
tap(點(diǎn)擊)
眾所周知, 移動(dòng)端的click有300ms延遲(瀏覽器延遲300ms為了識(shí)別雙擊操作, 因?yàn)橐苿?dòng)端瀏覽器默認(rèn)雙擊可以縮放頁面), 為了避免"點(diǎn)擊穿透"我們創(chuàng)建了tap事件, 同時(shí)通過preventDefault來禁止click觸發(fā). tap在touchend階段觸發(fā), 說下識(shí)別tap的必要條件:
- 觸發(fā)一次touchstart和touchend.
- touchstart和touchend的坐標(biāo)之間的距離不能超過2px.
- touchstart觸發(fā)后,250ms內(nèi)必須觸發(fā)touchend, 不然會(huì)被識(shí)別成press.
doubletap(雙擊)
2次連續(xù)的tap(單擊)觸發(fā)雙擊, 雙擊的原理如下: 每次tap后并不觸發(fā)tap, 而是等待300ms看是否有雙擊觸發(fā), 如果沒有那么2次tap依次觸發(fā), 否則觸發(fā)雙擊,單擊不觸發(fā). (關(guān)于多擊更細(xì)的原理, 后面我會(huì)單獨(dú)通過源碼解析), 必要條件:
- 2次點(diǎn)擊之間不能超過300ms.
- 2次點(diǎn)擊的距離不能超過9px.
press(按)
按住屏幕不放, 一段時(shí)間后觸發(fā)press時(shí)間,觸發(fā)press后, 離開觸點(diǎn), 觸發(fā)pressup事件, 識(shí)別的必要條件如下:
- touchstart和touchmove之間的距離不能超過9px.
- 即便觸點(diǎn)不離開屏幕, 251ms后也會(huì)觸發(fā)press. 這個(gè)251ms對(duì)應(yīng)tap的必要條件第3條.
pan(拖拽)
(1指或多指)按住屏幕不離開, 每一次移動(dòng)都會(huì)觸發(fā)pan. 舉幾個(gè)例子:
- 輪播效果的拖拽切換, 這個(gè)拖拽動(dòng)作就是pan.
- 抽屜(draw)組件的拖拽顯示更多內(nèi)容.
- 選項(xiàng)卡(tabs)組件的拖拽顯示更多選項(xiàng)卡.
pan是組件開發(fā)中最常用的手勢.
swipe(劃)
(1指或多指)按住屏幕快速滑動(dòng), 當(dāng)手指離開屏幕的一瞬間, 觸發(fā)swipe. 必要條件如下:
- 滑動(dòng)超過一定距離(如10px).
- 滑動(dòng)速度足夠快(大于0.3px/ms).
輪播組件的用swipe來表示"切換下一幕".
pinch(嚙合)
2指及以上按住屏幕, 讓2個(gè)手指之間的距離發(fā)生變化, 通過距離的變化來表示pinch是放大開始縮小.
常見于gallery組件, 用來放大/縮小圖片.
rotate(旋轉(zhuǎn))
2指及以上按住屏幕, 通過2指連接形成的直線和坐標(biāo)系的x軸的夾角的變化而觸發(fā)rotate. 常用于圖片處理, 用來旋轉(zhuǎn)圖片.
源碼
上面關(guān)于手勢識(shí)別的具體邏輯可以看我的倉庫, 地址: https://github.com/any86/any-touch/tree/master/src/recognitions
未完待續(xù)
本次先講這么多, 后面的文章具體要講什么看大家的回復(fù)想聽什么, 期待大家的回復(fù), 本人熱愛前端, 但能力有限, 有講的不對(duì)的請(qǐng)大家多多指點(diǎn).
相關(guān)概念解釋
點(diǎn)擊穿透
當(dāng)A/B兩個(gè)層上下z軸重疊，上層的A點(diǎn)擊后消失或移開，并且B元素本身有默認(rèn)click事件（如a標(biāo)簽）或綁定了click事件。在這種情況下，點(diǎn)擊A/B重疊的部分，就會(huì)出現(xiàn)點(diǎn)透的現(xiàn)象.
