單指手勢事件的實現

2016-10-26 1429 0 編輯:深色多郎 來源:網站風向書籍

伴隨著移動端的發展,觸摸交互的手勢也越來越豐富,從起初最簡單的點擊發展到現在的長按、側滑、拖動等,更為復雜的還會有雙指縮放等事件。可以說,手勢設計在移動頁面上起到了簡化界面元素,增加交互多樣性的重要角色。

原生基礎事件

嘗試寫過原生手勢的同學應該都知道,和手勢相關的基本事件其實只有這么四個:touchstart、 touchend、 touchmove、 touchcancel。幾乎所有復雜的交互都是通過這幾個簡單的事件來完成的。

touchstart:手指觸摸屏幕開始

touchmove:手指在屏幕上進行滑動操作

touchend:手指離開屏幕

touchcancel:手勢過程中被打斷(如長按時被瀏覽器選中文字打斷)

模擬高級事件

在單指手勢中,不同的手勢動作都會有對應的特定的操作行為。下面列出的是期望模擬出來的幾種手勢。

singleTap:輕擊,輕擊界面中元素,應用最為廣泛的事件

doubleTap:雙擊,連續輕擊界面中的元素,常見為雙擊放大

longTap:長按,按住元素不松,常見交互為長按刪除

swipeUp、swipeRight、swipeDown、swipeleft:快速滑動,常用于左劃刪除,上下左右翻頁

模擬手勢邏輯

上面列舉了移動WEB的原生基礎手勢事件和期望達到的高級手勢事件。那么如何通過簡單的事件模擬更為豐富的手勢事件呢?這里簡單寫下深正互聯梳理出來的事件觸發邏輯。

事件之間互斥

這里模擬出的事件原則上都是互斥的,即:單次手勢交互,僅僅觸發一個事件,而不會同時響應多個事件。這樣的好處極為明顯,舉個例子:實現一個使用手勢操作的圖片查看器。

雙擊放大,再次雙擊恢復原狀,完成微交互上的一個循環。

輕擊圖片關閉圖片查看器

左右劃動切換圖片

上劃查看圖片標題及詳細信息,下劃恢復原狀

長按喚出編輯菜單

要實現上面的要求,就必須保證每一次手勢交互的事件都是單一的,如區分輕擊關閉與雙擊縮放,輕擊、雙擊、長按相互獨立。

解決互斥引起的問題

除了雙擊事件,其余各個事件在手指移動、抬起的一瞬間即可判定完成。然而要實現雙擊與輕擊間的互斥,代碼上必須要通過延時觸發事件來完成,因此輕擊事件必然會有一點點兒的延遲(其實也只有190ms而已)。

如何解決這個延遲呢?最簡單粗暴的方式就是在手指抬起的一瞬間,主動觸發輕擊事件,然而這樣就無法保證輕擊與雙擊事件的互斥。因此這個方案不可行,否決。

既然延遲是為了模擬雙擊事件,那么在沒有綁定雙擊事件的時候就無需通過延時來觸發輕擊事件,因此可以在雙擊事件判定的邏輯前,檢測是否綁定了雙擊事件,若無則直接觸發,若有,則會使用延時處理。

處理拖拽事件

為了處理拖拽事件,這里新增了swipeStart、swipeEnd、swipe三個事件,這三個事件并不遵循互斥原則,swipeStart和swipeEnd事件在每次觸摸交互中都會觸發,swipe事件在拖動過程中會持續觸發。

另外因為拖動過程中常常會牽涉到手指當前位置與初始位置的關系,這里小劇已經主動計算了event.moveX、event.moveY,避免重復性的計算,可供調用者使用。

手指網站建設

本站文章均為深正網站建設摘自權威資料,書籍,或網絡原創文章,如有版權糾紛或者違規問題,請即刻聯系我們刪除,我們歡迎您分享,引用和轉載,但謝絕直接搬磚和抄襲!感謝...
關注深正互聯
我們猜你喜歡
七星彩头尾