超小Web手勢(shì)庫(kù)AlloyFinger原理

Karuru 發(fā)布于2019-08-20 12:12 / 1881人閱讀

摘要：目前作為騰訊手機(jī)手勢(shì)解決方案，在各大項(xiàng)目中都發(fā)揮著作用。因此也入選了騰訊平臺(tái)的精品組件除了國(guó)內(nèi)外的項(xiàng)目團(tuán)隊(duì)都在使用，國(guó)內(nèi)外的各大網(wǎng)站也進(jìn)行了轉(zhuǎn)載報(bào)道，作為超級(jí)小的手勢(shì)庫(kù)，騰訊的項(xiàng)目為什么不選擇而選擇下面從各個(gè)角度架構(gòu)原理上進(jìn)行一下分析。

目前AlloyFinger作為騰訊手機(jī)QQ web手勢(shì)解決方案，在各大項(xiàng)目中都發(fā)揮著作用。
感興趣的同學(xué)可以去Github看看：

https://github.com/AlloyTeam/AlloyFinger

在騰訊，如：興趣部落、QQ群、QQ動(dòng)漫、騰訊學(xué)院、TEDxTencent、 AlloyTeam、騰訊CDC等多個(gè)部門(mén)、團(tuán)隊(duì)和項(xiàng)目都在使用AlloyFinger。如下圖所示：

基本上只要有圖像裁剪、圖像查看的地方都會(huì)使用到AlloyFinger。因此AlloyFinger也入選了騰訊code平臺(tái)的精品組件：

除了國(guó)內(nèi)外的項(xiàng)目團(tuán)隊(duì)都在使用AlloyFinger，國(guó)內(nèi)外的各大IT網(wǎng)站也進(jìn)行了轉(zhuǎn)載報(bào)道，作為超級(jí)小的手勢(shì)庫(kù)，騰訊的web項(xiàng)目為什么不選擇hammerjs而選擇AlloyFinger?下面從各個(gè)角度、架構(gòu)、原理上進(jìn)行一下分析。

體積

可以看到hammerjs體積遠(yuǎn)遠(yuǎn)大于AlloyFinger，對(duì)于手機(jī)QQ web加載速度性能追求極致的同學(xué)來(lái)說(shuō)，使用hammerjs的大小是不可以接受的！
那么，為什么hammerjs這么大？看下架構(gòu)設(shè)計(jì)便可知曉。

架構(gòu)設(shè)計(jì)

其實(shí)，hammerjs抽象出的Class還沒(méi)有列舉全，還有許多。所以過(guò)度工程化，導(dǎo)致其體積特別大。
一個(gè)好的設(shè)計(jì)并不需要把每個(gè)邏輯點(diǎn)都抽象出來(lái)，局部過(guò)程化，整體OO是可以。如AlloyFinger的設(shè)計(jì)。僅僅只有Vector2和AlloyFinger，在touchstart、touchmove、touchend是可以trigger出相關(guān)的手勢(shì)事件的，簡(jiǎn)單、直接！hammerjs能支持的手勢(shì)，AlloyFinger都能支持。

具體實(shí)現(xiàn)

眾所周知，瀏覽器暴露了四個(gè)事件給開(kāi)發(fā)者，touchstart touchmove touchend touchcancel，在這四個(gè)事件的回調(diào)函數(shù)可以拿到TouchEvent。
TouchEvent:
touches：當(dāng)前位于屏幕上的所有手指動(dòng)作的列表
targetTouches：位于當(dāng)前 DOM 元素上的手指動(dòng)作的列表
changedTouches：涉及當(dāng)前事件的手指動(dòng)作的列表
TouchEvent里可以拿到各個(gè)手指的坐標(biāo)，那么可編程性就這么產(chǎn)生了。

Tap點(diǎn)按

移動(dòng)端click有300毫秒延時(shí)，tap的本質(zhì)其實(shí)就是touchend。但是要判斷touchstart的手的坐標(biāo)和touchend時(shí)候手的坐標(biāo)x、y方向偏移要小于30。小于30才會(huì)去觸發(fā)tap。

longTap長(zhǎng)按

touchstart開(kāi)啟一個(gè)750毫秒的settimeout，如果750ms內(nèi)有touchmove或者touchend都會(huì)清除掉該定時(shí)器。超過(guò)750ms沒(méi)有touchmove或者touchend就會(huì)觸發(fā)longTap

swipe劃

這里需要注意，當(dāng)touchstart的手的坐標(biāo)和touchend時(shí)候手的坐標(biāo)x、y方向偏移要大于30，判斷swipe，小于30會(huì)判斷tap。那么用戶到底是從上到下，還是從下到上，或者從左到右、從右到左滑動(dòng)呢？可以根據(jù)上面三個(gè)判斷得出，具體的代碼如下：

_swipeDirection: function (x1, x2, y1, y2) {
        return Math.abs(x1 - x2) >= Math.abs(y1 - y2) ? (x1 - x2 > 0 ? "Left" : "Right") : (y1 - y2 > 0 ? "Up" : "Down")
}

pinch捏

這個(gè)手勢(shì)是使用頻率非常高的，如圖像裁剪的時(shí)候放大或者縮小圖片，就需要pinch。

如上圖所示，兩點(diǎn)之間的距離比值求pinch的scale。這個(gè)scale會(huì)掛載在event上，讓用戶反饋給dom的transform或者其他元素的scale屬性。

rotate旋轉(zhuǎn)

如上圖所示，利用內(nèi)積，可以求出兩次手勢(shì)狀態(tài)之間的夾角θ。但是這里怎么求旋轉(zhuǎn)方向呢？那么就要使用差乘（Vector Cross）。
利用cross結(jié)果的正負(fù)來(lái)判斷旋轉(zhuǎn)的方向。

cross本質(zhì)其實(shí)是面積，可以看下面的推導(dǎo)：

所以，物理引擎里經(jīng)常用cross來(lái)計(jì)算轉(zhuǎn)動(dòng)慣量，因?yàn)榱仄鋵?shí)要是力乘矩相當(dāng)于面積：

總結(jié)

主要的一些事件觸發(fā)原理已經(jīng)在上面講解，還有如multipointStart、doubleTap、singleTap、multipointEnd可以看源碼，不到200行的代碼應(yīng)該很容易消化。trigger手勢(shì)事件的同時(shí)，touchStart、touchMove、touchEnd和touchCancel同樣也可以監(jiān)聽(tīng)。
詳細(xì)的Vector2和AlloyFinger代碼可以去Github上查閱：
https://github.com/AlloyTeam/AlloyFinger
任何意見(jiàn)或者建議歡迎提issue：
https://github.com/AlloyTeam/AlloyFinger/issues