建站
咨詢
售后
建站咨詢
新聞中心
目前AlloyFinger作為騰訊手機(jī)QQ web手勢解決方案，在各大項(xiàng)目中都發(fā)揮著作用。
感興趣的同學(xué)可以去Github看看：
https://github.com/AlloyTeam/AlloyFinger
在騰訊，如：興趣部落、QQ群、QQ動(dòng)漫、騰訊學(xué)院、TEDxTencent、 AlloyTeam、騰訊CDC等多個(gè)部門、團(tuán)隊(duì)和項(xiàng)目都在使用AlloyFinger。如下圖所示：
基本上只要有圖像裁剪、圖像查看的地方都會(huì)使用到AlloyFinger。因此AlloyFinger也入選了騰訊code平臺的精品組件：
除了國內(nèi)外的項(xiàng)目團(tuán)隊(duì)都在使用AlloyFinger，國內(nèi)外的各大IT網(wǎng)站也進(jìn)行了轉(zhuǎn)載報(bào)道，作為超級小的手勢庫，騰訊的web項(xiàng)目為什么不選擇hammerjs而選擇AlloyFinger?下面從各個(gè)角度、架構(gòu)、原理上進(jìn)行一下分析。
體積
可以看到hammerjs體積遠(yuǎn)遠(yuǎn)大于AlloyFinger，對于手機(jī)QQ web加載速度性能追求***的同學(xué)來說，使用hammerjs的大小是不可以接受的!那么，為什么hammerjs這么大?看下架構(gòu)設(shè)計(jì)便可知曉。
架構(gòu)設(shè)計(jì)
其實(shí)，hammerjs抽象出的Class還沒有列舉全，還有許多。所以過度工程化，導(dǎo)致其體積特別大。一個(gè)好的設(shè)計(jì)并不需要把每個(gè)邏輯點(diǎn)都抽象出來，局部過程化，整體OO是可以。如AlloyFinger的設(shè)計(jì)。僅僅只有Vector2和AlloyFinger，在touchstart、touchmove、touchend是可以trigger出相關(guān)的手勢事件的，簡單、直接!hammerjs能支持的手勢，AlloyFinger都能支持。
具體實(shí)現(xiàn)
眾所周知，瀏覽器暴露了四個(gè)事件給開發(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長按
touchstart開啟一個(gè)750毫秒的settimeout，如果750ms內(nèi)有touchmove或者touchend都會(huì)清除掉該定時(shí)器。超過750ms沒有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í)候放大或者縮小圖片，就需要pinch。
如上圖所示，兩點(diǎn)之間的距離比值求pinch的scale。這個(gè)scale會(huì)掛載在event上，讓用戶反饋給dom的transform或者其他元素的scale屬性。
rotate旋轉(zhuǎn)
如上圖所示，利用內(nèi)積，可以求出兩次手勢狀態(tài)之間的夾角θ。但是這里怎么求旋轉(zhuǎn)方向呢?那么就要使用差乘(Vector Cross)。利用cross結(jié)果的正負(fù)來判斷旋轉(zhuǎn)的方向。
cross本質(zhì)其實(shí)是面積，可以看下面的推導(dǎo)：
所以，物理引擎里經(jīng)常用cross來計(jì)算轉(zhuǎn)動(dòng)慣量，因?yàn)榱仄鋵?shí)要是力乘矩相當(dāng)于面積：
總結(jié)
主要的一些事件觸發(fā)原理已經(jīng)在上面講解，還有如multipointStart、doubleTap、singleTap、multipointEnd可以看源碼，不到200行的代碼應(yīng)該很容易消化。trigger手勢事件的同時(shí)，touchStart、touchMove、touchEnd和touchCancel同樣也可以監(jiān)聽。
詳細(xì)的Vector2和AlloyFinger代碼可以去Github上查閱：
https://github.com/AlloyTeam/AlloyFinger
任何意見或者建議歡迎提issue：
https://github.com/AlloyTeam/AlloyFinger/issues
標(biāo)題名稱：超小Web手勢庫AlloyFinger原理
標(biāo)題網(wǎng)址：http://www.5511xx.com/article/ccidhcd.html
