国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

用typescript開發(fā)手勢庫 - (1)web開發(fā)常用手勢有哪些?

raise_yang / 1502人閱讀

這只是個開頭

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

目錄

用TypeScript開發(fā)手勢庫 - (2)tsconfig.json & rollup.config.js & npx

用TypeScript開發(fā)手勢庫 - (3)統(tǒng)一化Mouse和Touch事件

不到30行, 用any-touch實(shí)現(xiàn)一個drawer

今天我們先不寫代碼

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

感謝一定要寫在最前面

感謝開源的hammer.js, 是他讓我學(xué)會了很多手勢方面的知識.

還要感謝寫這篇文章的作者,文章地址, 文章詳細(xì)介紹了關(guān)于旋轉(zhuǎn)和縮放手勢變化的計算.

那么常用手勢有哪些?

回到正題, 常見的手勢有: tap(點(diǎn)擊) press(按住) 拖拽(pan) 劃過(swipe) 捏合縮放(pinch) 旋轉(zhuǎn)(rotate), 所有的手勢在移動端其實(shí)都是通過touch事件的不同觸發(fā)時機(jī)而區(qū)分出的(pc端是mouseup/mousemove/mousedown, 關(guān)于如何通過鼠標(biāo)識別手勢, 后面的文章會有多帶帶的章節(jié)).

這里有個demo, 我把所有的手勢識別放在了里面.

tap(點(diǎn)擊)

眾所周知, 移動端的click有300ms延遲(瀏覽器延遲300ms為了識別雙擊操作, 因為移動端瀏覽器默認(rèn)雙擊可以縮放頁面), 為了避免"點(diǎn)擊穿透"我們創(chuàng)建了tap事件, 同時通過preventDefault來禁止click觸發(fā). tap在touchend階段觸發(fā), 說下識別tap的必要條件:

觸發(fā)一次touchstart和touchend.

touchstart和touchend的坐標(biāo)之間的距離不能超過2px.

touchstart觸發(fā)后,250ms內(nèi)必須觸發(fā)touchend, 不然會被識別成press.

doubletap(雙擊)

2次連續(xù)的tap(單擊)觸發(fā)雙擊, 雙擊的原理如下: 每次tap后并不觸發(fā)tap, 而是等待300ms看是否有雙擊觸發(fā), 如果沒有那么2次tap依次觸發(fā), 否則觸發(fā)雙擊,單擊不觸發(fā). (關(guān)于多擊更細(xì)的原理, 后面我會多帶帶通過源碼解析), 必要條件:

2次點(diǎn)擊之間不能超過300ms.

2次點(diǎn)擊的距離不能超過9px.

press(按)

按住屏幕不放, 一段時間后觸發(fā)press時間,觸發(fā)press后, 離開觸點(diǎn), 觸發(fā)pressup事件, 識別的必要條件如下:

touchstart和touchmove之間的距離不能超過9px.

即便觸點(diǎn)不離開屏幕, 251ms后也會觸發(fā)press. 這個251ms對應(yīng)tap的必要條件第3條.

pan(拖拽)

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

輪播效果的拖拽切換, 這個拖拽動作就是pan.

抽屜(draw)組件的拖拽顯示更多內(nèi)容.

選項卡(tabs)組件的拖拽顯示更多選項卡.

pan是組件開發(fā)中最常用的手勢.

swipe(劃)

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

滑動超過一定距離(如10px).

滑動速度足夠快(大于0.3px/ms).

輪播組件的用swipe來表示"切換下一幕".

pinch(嚙合)

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

rotate(旋轉(zhuǎn))

2指及以上按住屏幕, 通過2指連接形成的直線和坐標(biāo)系的x軸的夾角的變化而觸發(fā)rotate. 常用于圖片處理, 用來旋轉(zhuǎn)圖片.

源碼

上面關(guān)于手勢識別的具體邏輯可以看我的倉庫, 地址: https://github.com/383514580/...

未完待續(xù)

本次先講這么多, 后面的文章具體要講什么看大家的回復(fù)想聽什么, 期待大家的回復(fù), 本人熱愛前端, 但能力有限, 有講的不對的請大家多多指點(diǎn).

相關(guān)概念解釋 點(diǎn)擊穿透

當(dāng)A/B兩個層上下z軸重疊，上層的A點(diǎn)擊后消失或移開，并且B元素本身有默認(rèn)click事件（如a標(biāo)簽）或綁定了click事件。在這種情況下，點(diǎn)擊A/B重疊的部分，就會出現(xiàn)點(diǎn)透的現(xiàn)象.

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/102665.html

相關(guān)文章

  • 用TypeScript開發(fā)手勢庫 - (3)統(tǒng)一化Mouse和Touch事件

    摘要：一個手勢庫往期目錄用開發(fā)手勢庫開發(fā)常用手勢有哪些用開發(fā)手勢庫開發(fā)常用手勢有哪些不到行用實(shí)現(xiàn)一個簡單看下架構(gòu)實(shí)現(xiàn)輸入格式統(tǒng)一為了同時支持鼠標(biāo)和設(shè)備我們第一步把種設(shè)備產(chǎn)生數(shù)據(jù)統(tǒng)一化統(tǒng)一化后的數(shù)據(jù)我們統(tǒng)一叫他個基礎(chǔ)個快捷包含個字段個基礎(chǔ)字 showImg(https://segmentfault.com/img/remote/1460000018610388?w=800&h=210); an...

    BigNerdCoding 評論0 收藏0

  • 用TypeScript開發(fā)手勢庫 - (2)tsconfig.json & rollup.c

    摘要：一個手勢庫往期目錄用開發(fā)手勢庫開發(fā)常用手勢有哪些用開發(fā)手勢庫統(tǒng)一化和事件不到行用實(shí)現(xiàn)一個標(biāo)題有點(diǎn)長今天的標(biāo)題有點(diǎn)長但不難講的都是工具配置和使用就個知識點(diǎn)如何配置如何配置使用運(yùn)行項目所在的命令注為了閱讀體驗我把為什么不用放在的本文的最 showImg(https://segmentfault.com/img/remote/1460000018610388?w=800&h=210); an...

    roundstones 評論0 收藏0

  • 用TypeScript開發(fā)手勢庫 - (2)tsconfig.json & rollup.c

    摘要：一個手勢庫往期目錄用開發(fā)手勢庫開發(fā)常用手勢有哪些用開發(fā)手勢庫統(tǒng)一化和事件不到行用實(shí)現(xiàn)一個標(biāo)題有點(diǎn)長今天的標(biāo)題有點(diǎn)長但不難講的都是工具配置和使用就個知識點(diǎn)如何配置如何配置使用運(yùn)行項目所在的命令注為了閱讀體驗我把為什么不用放在的本文的最 showImg(https://segmentfault.com/img/remote/1460000018610388?w=800&h=210); an...

    cod7ce 評論0 收藏0

  • 不到30行, 用any-touch實(shí)現(xiàn)一個drawer

    摘要：一個手勢庫預(yù)覽的基本邏輯添加個一個是當(dāng)隱藏的時候打開隱藏的觸發(fā)開關(guān)一個是本身對把手和進(jìn)行進(jìn)行定位到界面的右側(cè)邊緣調(diào)整和把手的樣式這里把手主要是要設(shè)置背景色為透明具體樣式看下面代碼用分別給把手和添加拖拽手勢當(dāng)隱藏時拖拽把手向右通過返回的每 showImg(https://segmentfault.com/img/remote/1460000018610388?w=800&h=210); ...

    source 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<