教你如何預判用戶手勢行為

since1986 發布于2019-08-19 17:45 / 1967人閱讀

摘要：那接下來的問題就是如何事先判斷用戶意圖，來選擇是否阻止瀏覽器默認行為一僅僅通過滑動的，距離二通過手指劃過的曲線斜率第一個，方法就不說了，不用想都知道不可行。

本文不想過多的介紹算法，只闡述核心思路

近來一直在思考，移動端的手勢操作如何能更加精確。用戶到底是想上下滑動呢，還是想左右滑動操作某個東西呢？

如下圖，在頁面有一個日歷。日歷是靠手勢左右滑動切換上下月份（可實時滑動，而不是滑動完成的回調才切換）

有的安卓有個bug，不阻止瀏覽器默認行為，就無法實時觸發move。那如果阻止了瀏覽器默認行為，當我手指在日歷這塊區域內，就沒法觸發瀏覽器上下滑動。

為了解決這個問題，我覺得必須得事先判斷用戶意圖，才能判斷出是否要執行上下滑動，還是左右滑動的操作。

那接下來的問題就是如何事先判斷用戶意圖，來選擇是否阻止瀏覽器默認行為

一、僅僅通過滑動的x，y距離
二、通過手指劃過的曲線斜率tanα

第一個，方法就不說了，不用想都知道不可行。

第二個算法比較容易，基本學過三角函數的就都會算

我們在手指滑動的過程中實時獲取tanα的值，通過某個臨界值來判斷是否是上下滑動，還是左右滑動。

經過調試，這個在本demo的確是可達到我們的預期效果。那我就想，如果是想微信那樣的聊天列表呢？整個列表都需要手勢的各種操作（比如左滑動某個item，刪除，收藏等）

同樣，我又寫了一個list item進行這種算法的測試。

雖然我們的手指劃過曲線斜率可以計算出來，但是我們的對比值應該也是一個動態變化的，沒有一個很好的標準。所以這種算法是失敗的。

進過這次測試，不得已思考更優良的算法---- 微積分

先說說思路，為什么選擇的是微積分。看下圖

我們可以想象一下，其實我們每次的手勢滑動，都是一條近似的曲線。那我們就能通過曲線的面積，來進行計算，是否為上下還是左右。手指劃過面積解決了，那如何獲得我們的【比較值】呢？

通過上述兩個demo對比，我們可以發現是觸摸元素target的寬高比的問題。所以只要得知target的寬高，可知道夾角，就可以反推導出曲線函數。

好了！這樣就獲取了所有未知數，既然有了兩個曲線函數就可以進行積分求面積做對比了。
最后還有一種情況是，特別高的元素（有可能想做的是上下滑動，而非左右滑動），那我們就得特殊處理，在我們算法里得設置最大上限值即可。如果你想做一屏的移動端游戲，或者上下滑動，我們也可以進行一個設置完全阻止瀏覽器默認行為。

這基本就是我整個手勢庫的核心了。

最后丟出demo

eTouch : https://github.com/MeCKodo/eTouch

list item：http://meckodo.github.io/eTouch/list.html

calendar： http://meckodoo.sinaapp.com/demo/17/index.html

為了可以幫助到更多的人，請給予您的star

云服務器 GPU云服務器用戶行為用戶行為分析用戶行為 clickstream java統計用戶行為

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

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

如何造一個『為移動端而生』的日歷

摘要：主要是為了阻止微信瀏覽器的默認滑動。四如何利用五個做到無限滑動其實我在寫第一個版本的日歷的時候，采取的解決辦法是當新的月份產生之后，往中不斷。如何控制的值實現滑動效果，這個問題不是這次的重點。之前寫了一篇Calendar -『為移動端而生』的自定義日歷，一直有童鞋對這個插件的手勢處理存在一些問題，所以想寫篇文章，來說說它的成長史~ 在閱讀本文之前，確保你有稍微看過 calendar ...

joy968 2019-08-20 17:42 評論0 收藏0
如何造一個『為移動端而生』的日歷

摘要：主要是為了阻止微信瀏覽器的默認滑動。四如何利用五個做到無限滑動其實我在寫第一個版本的日歷的時候，采取的解決辦法是當新的月份產生之后，往中不斷。如何控制的值實現滑動效果，這個問題不是這次的重點。之前寫了一篇Calendar -『為移動端而生』的自定義日歷，一直有童鞋對這個插件的手勢處理存在一些問題，所以想寫篇文章，來說說它的成長史~ 在閱讀本文之前，確保你有稍微看過 calendar ...

inapt 2019-08-29 12:52 評論0 收藏0
如何造一個『為移動端而生』的日歷

摘要：主要是為了阻止微信瀏覽器的默認滑動。四如何利用五個做到無限滑動其實我在寫第一個版本的日歷的時候，采取的解決辦法是當新的月份產生之后，往中不斷。如何控制的值實現滑動效果，這個問題不是這次的重點。之前寫了一篇Calendar -『為移動端而生』的自定義日歷，一直有童鞋對這個插件的手勢處理存在一些問題，所以想寫篇文章，來說說它的成長史~ 在閱讀本文之前，確保你有稍微看過 calendar ...

FleyX 2019-08-01 17:06 評論0 收藏0
毫無色彩的二哲和他的巡禮之年

摘要：前戲今年，對于我個人而言遭遇了三個重大的轉折點。盡可能的把溝通成本用約定和文檔降低。學習的這一年可以說年的學習，在上半年的精力，放在了技術上。而下半年則相反。前戲今年，對于我個人而言遭遇了三個重大的轉折點。 15年9月大三休學創業，16年9月重新復學大三在2016年4月順利引進天使輪，公司從廈門集美區搬到了深圳南山區 16年底，我們正在準備接入A輪 16年與15年相比，總體來...

Alex 2019-08-20 14:05 評論0 收藏0