AlloyFinger web 手勢學習

seanlook 發布于2019-08-22 14:51 / 1724人閱讀

摘要：從長按開始學習手勢在項目開發過程中遇到有虛擬鍵盤開發的需求如下圖，其中刪除鍵需要實現長按刪除輸入框全部內容，由此展開今天要討論的手勢開發內容。所以長按手勢實際上是由三者共同模擬的效果。

從 [長按] 開始學習 web 手勢

在項目開發過程中遇到有虛擬鍵盤開發的需求（如下圖），其中刪除鍵需要實現長按刪除輸入框全部內容，由此展開今天要討論的 web 手勢 開發內容。

先放出實現代碼：

var $input = document.getElementById("input");
var $delBtn = document.getElementById("delBtn");
var delBtnClock = null;
$delBtn.ontouchstart = function () {
    $input.innerHTML = $input.innerHTML.slice(0, -1)
    delBtnClock = setTimeout(function () {
        $input.innerHTML = "";
    }, 500);
}
$delBtn.ontouchend = function () {
    clearTimeout(delBtnClock)；
    delBtnClock = null;
}

關鍵代碼就兩句話：

在 touchstart 事件中開啟計時，這里是計時 500 ms 后，刪除輸入框內容

在 touchend 事件中清除 setTimeout 計時器

如果只是點擊，此時 touchend 距離 touchstart 肯定不到 500 ms，計時器在時間沒到前已被刪除，實現的效果就只是退格；如果長按超過 500 ms，計時器執行，實現輸入框內容全部刪除。

所以長按手勢實際上是由 touchstart & touchend & setTimeout 三者共同模擬的效果。

實際上，常規的 js 事件只支持 click、touchstart、touchend、touchmove、touchcancel 這五種與點擊相關的事件，如果想實現更多的諸如旋轉、放大縮小之類的手勢的話，就需要結合上面的五種事件和其他方法來模擬實現了。

下面我將來介紹下傳說中的《超級小的 web 手勢庫：AlloyFinger》

學習 AlloyFinger

業內知名的強大的 web 手勢庫 hammer.js，總共有 3240 行代碼，壓縮版的 44.7 kb。與之相比，AlloyFinger 真的稱得上超級小了，326 行代碼，10 倍的差距，在 “kb 必爭” 移動 web 應用里，AlloyFinger 一下就引起了廣大開發者的注意，代碼量小，功能又齊全，你還要什么單車呢。（我是不是得找人家要下廣告費）

在 AlloyFinger 里，手勢一共有 14 種，除了常規的 4 種 touchstart，touchmove，touchend 和 touchcancel，還有 10 種由以上 4 種衍生出來的手勢如下：

multipointStart：多點開始

multipointEnd：多點結束

tap：點擊，效果如 click

doubleTap：雙擊

longTap：長按

singleTap：單擊情況下 250 ms 內沒有再次點擊（會同時觸發 tap，tap 在前）

rotate：旋轉（同時觸發 pressMove）

pinch：放大縮小

pressMove：單點移動

twoFingerPressMove：多點移動

swipe：掃滑，在 touchend 里觸發，與 touchmove 稍有不同

原理

multipointStart

touchstart 中，觸點多于 1 個時觸發

multipointEnd

touchend 中，觸點少于 2 個時觸發（一開始還在想是不是 bug，實際的意思是：最后一個手指離開時觸發）

tap

touchend 中，觸點沒有移動（移動橫縱距離小于 30 px），且沒有觸發 longTap 時（距離 touchStart 時間少于 750 ms）觸發

doubleTap

touchend 中，有上一次的點擊記錄 & 點擊時間差小于 250 ms & 兩次點擊間沒有移動（移動橫縱距離小于 30 px）

longTap

touchstart 中，添加 750 ms 計時器，在這個時間段內沒有松手（touchEnd）移動（touchMove），則觸發

singleTap

touchend 中，單擊情況下 250 ms 內沒有再次點擊

rotate

touchmove 中，觸點多于 1 個，并存在上一次的多點移動記錄時觸發

pinch

touchmove 中，觸點多于 1 個 & 存在上一次的移動記錄 & 有縮放長度記錄時觸發

pressMove

touchmove 中，觸點等于 1 個

twoFingerPressMove

touchmove 中，觸點多于 1 個

swipe

touchend 中，觸點有移動（移動橫縱距離大于 30 px）

生命周期

重點

代碼中多處使用 setTimeout(function () {}, 0);，一方面實現同步轉異步，釋放線程，另一方面也能確保屏幕滾動時阻止事件的觸發

滑動時，以最大的移動方向決定水平和豎直方向

_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")
        }

在閱讀源碼過程中，對關鍵代碼做了注釋，點我

GPU云服務器云服務器 web 手勢控制庫 webrtc AlloyFinger 學習web前端 web前端學習

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/92927.html

超小Web手勢庫AlloyFinger原理

摘要：目前作為騰訊手機手勢解決方案，在各大項目中都發揮著作用。因此也入選了騰訊平臺的精品組件除了國內外的項目團隊都在使用，國內外的各大網站也進行了轉載報道，作為超級小的手勢庫，騰訊的項目為什么不選擇而選擇下面從各個角度架構原理上進行一下分析。目前AlloyFinger作為騰訊手機QQ web手勢解決方案，在各大項目中都發揮著作用。感興趣的同學可以去Github看看： https://git...

Karuru 2019-08-20 12:12 評論0 收藏0
超級小的web手勢庫AlloyFinger發布

摘要：擁有兩個版本，無依賴的獨立版和版本。除了對象，也可監聽內元素的手勢需要引擎內置對象支持綁定相關事件。據不完全統計，目前服務于興趣部落群動漫騰訊學院騰訊等多個部門團隊和項目。也可以在事件回調里根據攜帶的信息使用去操作。簡介針對多點觸控設備編程的Web手勢組件，快速幫助你的web程序增加手勢支持，也不用再擔心click 300ms的延遲了。擁有兩個版本，無依賴的獨立版和react版本。...

ymyang 2019-08-19 18:24 評論0 收藏0
基礎觸屏手勢學習

摘要：最近接到一個小的項目，需要實現觸屏滑動，圖片縮放旋轉移動，故而花了三天時間學習并實現了一下，在此記錄一下學習過程關鍵就是觸屏手勢用到的技術過渡轉換我就不說了，與是屬于輕量級的觸屏手勢封裝庫，其中水平移動用的是別的功能用的是。最近接到一個小的項目，需要實現觸屏滑動，圖片縮放旋轉移動，故而花了三天時間學習并實現了一下，在此記錄一下學習過程：關鍵就是css、觸屏手勢用到的技術：css過...

leo108 2019-08-26 10:21 評論0 收藏0
基礎觸屏手勢學習

摘要：最近接到一個小的項目，需要實現觸屏滑動，圖片縮放旋轉移動，故而花了三天時間學習并實現了一下，在此記錄一下學習過程關鍵就是觸屏手勢用到的技術過渡轉換我就不說了，與是屬于輕量級的觸屏手勢封裝庫，其中水平移動用的是別的功能用的是。最近接到一個小的項目，需要實現觸屏滑動，圖片縮放旋轉移動，故而花了三天時間學習并實現了一下，在此記錄一下學習過程：關鍵就是css、觸屏手勢用到的技術：css過...

leanxi 2019-08-30 15:44 評論0 收藏0