成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

AlloyFinger web 手勢學(xué)習(xí)

seanlook / 1772人閱讀

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

從 [長按] 開始學(xué)習(xí) web 手勢

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

先放出實(shí)現(xiàn)代碼：

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;
}

關(guān)鍵代碼就兩句話：

在 touchstart 事件中開啟計(jì)時(shí)，這里是計(jì)時(shí) 500 ms 后，刪除輸入框內(nèi)容

在 touchend 事件中清除 setTimeout 計(jì)時(shí)器

如果只是點(diǎn)擊，此時(shí) touchend 距離 touchstart 肯定不到 500 ms，計(jì)時(shí)器在時(shí)間沒到前已被刪除，實(shí)現(xiàn)的效果就只是退格；如果長按超過 500 ms，計(jì)時(shí)器執(zhí)行，實(shí)現(xiàn)輸入框內(nèi)容全部刪除。

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

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

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

學(xué)習(xí) AlloyFinger

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

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

multipointStart：多點(diǎn)開始

multipointEnd：多點(diǎn)結(jié)束

tap：點(diǎn)擊，效果如 click

doubleTap：雙擊

longTap：長按

singleTap：單擊情況下 250 ms 內(nèi)沒有再次點(diǎn)擊（會(huì)同時(shí)觸發(fā) tap，tap 在前）

rotate：旋轉(zhuǎn)（同時(shí)觸發(fā) pressMove）

pinch：放大縮小

pressMove：單點(diǎn)移動(dòng)

twoFingerPressMove：多點(diǎn)移動(dòng)

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

原理

multipointStart

touchstart 中，觸點(diǎn)多于 1 個(gè)時(shí)觸發(fā)

multipointEnd

touchend 中，觸點(diǎn)少于 2 個(gè)時(shí)觸發(fā)（一開始還在想是不是 bug，實(shí)際的意思是：最后一個(gè)手指離開時(shí)觸發(fā)）

tap

touchend 中，觸點(diǎn)沒有移動(dòng)（移動(dòng)橫縱距離小于 30 px），且沒有觸發(fā) longTap 時(shí)（距離 touchStart 時(shí)間少于 750 ms）觸發(fā)

doubleTap

touchend 中，有上一次的點(diǎn)擊記錄 & 點(diǎn)擊時(shí)間差小于 250 ms & 兩次點(diǎn)擊間沒有移動(dòng)（移動(dòng)橫縱距離小于 30 px）

longTap

touchstart 中，添加 750 ms 計(jì)時(shí)器，在這個(gè)時(shí)間段內(nèi)沒有松手（touchEnd）移動(dòng)（touchMove），則觸發(fā)

singleTap

touchend 中，單擊情況下 250 ms 內(nèi)沒有再次點(diǎn)擊

rotate

touchmove 中，觸點(diǎn)多于 1 個(gè)，并存在上一次的多點(diǎn)移動(dòng)記錄時(shí)觸發(fā)

pinch

touchmove 中，觸點(diǎn)多于 1 個(gè) & 存在上一次的移動(dòng)記錄 & 有縮放長度記錄時(shí)觸發(fā)

pressMove

touchmove 中，觸點(diǎn)等于 1 個(gè)

twoFingerPressMove

touchmove 中，觸點(diǎn)多于 1 個(gè)

swipe

touchend 中，觸點(diǎn)有移動(dòng)（移動(dòng)橫縱距離大于 30 px）

生命周期

重點(diǎn)

代碼中多處使用 setTimeout(function () {}, 0);， 一方面實(shí)現(xiàn)同步轉(zhuǎn)異步，釋放線程，另一方面也能確保屏幕滾動(dòng)時(shí)阻止事件的觸發(fā)

滑動(dòng)時(shí)，以最大的移動(dòng)方向決定水平和豎直方向

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

在閱讀源碼過程中，對關(guān)鍵代碼做了注釋，點(diǎn)我

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

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

相關(guān)文章

  • 超小Web手勢庫AlloyFinger原理

    摘要：目前作為騰訊手機(jī)手勢解決方案，在各大項(xiàng)目中都發(fā)揮著作用。因此也入選了騰訊平臺的精品組件除了國內(nèi)外的項(xiàng)目團(tuán)隊(duì)都在使用，國內(nèi)外的各大網(wǎng)站也進(jìn)行了轉(zhuǎn)載報(bào)道，作為超級小的手勢庫，騰訊的項(xiàng)目為什么不選擇而選擇下面從各個(gè)角度架構(gòu)原理上進(jìn)行一下分析。 目前AlloyFinger作為騰訊手機(jī)QQ web手勢解決方案，在各大項(xiàng)目中都發(fā)揮著作用。感興趣的同學(xué)可以去Github看看： https://git...

    Karuru 評論0 收藏0

  • 超級小的web手勢庫AlloyFinger發(fā)布

    摘要：擁有兩個(gè)版本，無依賴的獨(dú)立版和版本。除了對象，也可監(jiān)聽內(nèi)元素的手勢需要引擎內(nèi)置對象支持綁定相關(guān)事件。據(jù)不完全統(tǒng)計(jì)，目前服務(wù)于興趣部落群動(dòng)漫騰訊學(xué)院騰訊等多個(gè)部門團(tuán)隊(duì)和項(xiàng)目。也可以在事件回調(diào)里根據(jù)攜帶的信息使用去操作。 簡介 針對多點(diǎn)觸控設(shè)備編程的Web手勢組件，快速幫助你的web程序增加手勢支持，也不用再擔(dān)心click 300ms的延遲了。擁有兩個(gè)版本，無依賴的獨(dú)立版和react版本。...

    ymyang 評論0 收藏0

  • 基礎(chǔ)觸屏手勢學(xué)習(xí)

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

    leo108 評論0 收藏0

  • 基礎(chǔ)觸屏手勢學(xué)習(xí)

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

    leanxi 評論0 收藏0

發(fā)表評論

0條評論

seanlook

男|高級講師

TA的文章

閱讀更多
最新活動(dòng)
閱讀需要支付1元查看
<