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

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

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

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

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

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

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

1、僅僅經過滑動的x，y距離
2、經過手指劃過的曲線斜率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