用 TypeScript 開發手勢庫 - (1)web開發經常使用手勢有哪些?

這只是個開頭

說在最前面,本文是一個系列文章的開頭, 這個系列裏我會講如何用typescript開發一款支持pc和手機端的手勢庫any-touch, 以及經過jest讓你的代碼測試覆蓋率100%.

往期目錄

用 TypeScript 開發手勢庫 - (2)web開發經常使用手勢有哪些?

用 TypeScript 開發手勢庫 - (3)統一化Mouse和Touch事件

不到30行, 用any-touch實現一個drawer

今天咱們先不寫代碼

今天的文章裏咱們先不講代碼, 咱們講一下都有哪些手勢以及手勢的邏輯, 理解了邏輯再寫代碼就簡單了.

感謝必定要寫在最前面

1. 感謝開源的hammer.js, 是他讓我學會了不少手勢方面的知識.

2. 還要感謝寫這篇文章的做者,文章地址, 文章詳細介紹了關於旋轉和縮放手勢變化的計算.

那麼經常使用手勢有哪些?

回到正題, 常見的手勢有: tap(點擊) \ press(按住) \ 拖拽(pan) \ 劃過(swipe) \ 捏合縮放(pinch) \ 旋轉(rotate), 全部的手勢在移動端其實都是經過touch事件的不一樣觸發時機而區分出的(pc端是mouseup/mousemove/mousedown, 關於如何經過鼠標識別手勢, 後面的文章會有單獨的章節).

這裏有個demo, 我把全部的手勢識別放在了裏面.

tap(點擊)

衆所周知, 移動端的click有300ms延遲(瀏覽器延遲300ms爲了識別雙擊操做, 由於移動端瀏覽器默認雙擊能夠縮放頁面), 爲了不"點擊穿透"咱們建立了tap事件, 同時經過preventDefault來禁止click觸發. tap在touchend階段觸發, 說下識別tap的必要條件:

1. 觸發一次touchstart和touchend.
2. touchstart和touchend的座標之間的距離不能超過2px.
3. touchstart觸發後,250ms內必須觸發touchend, 否則會被識別成press.

doubletap(雙擊)

2次連續的tap(單擊)觸發雙擊, 雙擊的原理以下: 每次tap後並不觸發tap, 而是等待300ms看是否有雙擊觸發, 若是沒有那麼2次tap依次觸發, 不然觸發雙擊,單擊不觸發. (關於多擊更細的原理, 後面我會單獨經過源碼解析), 必要條件:

1. 2次點擊之間不能超過300ms.
2. 2次點擊的距離不能超過9px.

press(按)

按住屏幕不放, 一段時間後觸發press時間,觸發press後, 離開觸點, 觸發pressup事件, 識別的必要條件以下:

1. touchstart和touchmove之間的距離不能超過9px.
2. 即使觸點不離開屏幕, 251ms後也會觸發press. 這個251ms對應tap的必要條件第3條.

pan(拖拽)

(1指或多指)按住屏幕不離開, 每一次移動都會觸發pan. 舉幾個例子:

1. 輪播效果的拖拽切換, 這個拖拽動做就是pan.
2. 抽屜(draw)組件的拖拽顯示更多內容.
3. 選項卡(tabs)組件的拖拽顯示更多選項卡. pan是組件開發中最經常使用的手勢.

swipe(劃)

(1指或多指)按住屏幕快速滑動, 當手指離開屏幕的一瞬間, 觸發swipe. 必要條件以下:

1. 滑動超過必定距離(如10px).
2. 滑動速度足夠快(大於0.3px/ms). 輪播組件的用swipe來表示"切換下一幕".

pinch(齧合)

2指及以上按住屏幕, 讓2個手指之間的距離發生變化, 經過距離的變化來表示pinch是放大開始縮小. 常見於gallery組件, 用來放大/縮小圖片.

rotate(旋轉)

2指及以上按住屏幕, 經過2指鏈接造成的直線和座標系的x軸的夾角的變化而觸發rotate. 經常使用於圖片處理, 用來旋轉圖片.

源碼

上面關於手勢識別的具體邏輯能夠看個人倉庫, 地址: github.com/any86/any-t…

未完待續

本次先講這麼多, 後面的文章具體要講什麼看你們的回覆想聽什麼, 期待你們的回覆, 本人熱愛前端, 但能力有限, 有講的不對的請你們多多指點.

相關概念解釋

點擊穿透

當A/B兩個層上下z軸重疊，上層的A點擊後消失或移開，而且B元素自己有默認click事件（如a標籤）或綁定了click事件。在這種狀況下，點擊A/B重疊的部分，就會出現點透的現象.