資訊專欄INFORMATION COLUMN
摘要：那接下來的問題就是如何事先判斷用戶意圖，來選擇是否阻止瀏覽器默認(rèn)行為一僅僅通過滑動的，距離二通過手指劃過的曲線斜率第一個，方法就不說了，不用想都知道不可行。
本文不想過多的介紹算法，只闡述核心思路
近來一直在思考，移動端的手勢操作如何能更加精確。用戶到底是想上下滑動呢，還是想左右滑動操作某個東西呢？
如下圖，在頁面有一個日歷。日歷是靠手勢左右滑動切換上下月份（可實時滑動，而不是滑動完成的回調(diào)才切換）
有的安卓有個bug，不阻止瀏覽器默認(rèn)行為，就無法實時觸發(fā)move。那如果阻止了瀏覽器默認(rèn)行為，當(dāng)我手指在日歷這塊區(qū)域內(nèi)，就沒法觸發(fā)瀏覽器上下滑動。
為了解決這個問題，我覺得必須得 事先判斷用戶意圖 ，才能判斷出是否要執(zhí)行上下滑動，還是左右滑動的操作。
那接下來的問題就是 如何事先判斷用戶意圖 ，來選擇是否阻止瀏覽器默認(rèn)行為
一、僅僅通過滑動的x，y距離
二、通過手指劃過的曲線斜率tanα
第一個，方法就不說了，不用想都知道不可行。
第二個算法比較容易，基本學(xué)過三角函數(shù)的就都會算
我們在手指滑動的過程中實時獲取tanα的值，通過某個臨界值來判斷是否是上下滑動，還是左右滑動。
經(jīng)過調(diào)試，這個在本demo的確是可達到我們的預(yù)期效果。那我就想，如果是想微信那樣的聊天列表呢？整個列表都需要手勢的各種操作（比如左滑動某個item，刪除，收藏等）
同樣，我又寫了一個list item進行這種算法的測試。
雖然我們的手指劃過曲線斜率可以計算出來，但是我們的對比值應(yīng)該也是一個動態(tài)變化的，沒有一個很好的標(biāo)準(zhǔn)。所以這種算法是失敗的。
進過這次測試，不得已思考更優(yōu)良的算法---- 微積分
先說說思路，為什么選擇的是微積分?？聪聢D
我們可以想象一下，其實我們每次的手勢滑動，都是一條近似的曲線。那我們就能通過曲線的面積，來進行計算，是否為上下還是左右。手指劃過面積解決了，那如何獲得我們的【比較值】呢？
通過上述兩個demo對比，我們可以發(fā)現(xiàn)是觸摸元素target的寬高比的問題。所以只要得知target的寬高，可知道夾角，就可以反推導(dǎo)出曲線函數(shù)。
好了！這樣就獲取了所有未知數(shù)，既然有了兩個曲線函數(shù)就可以進行積分求面積做對比了。
最后還有一種情況是，特別高的元素（有可能想做的是上下滑動，而非左右滑動），那我們就得特殊處理，在我們算法里得設(shè)置最大上限值即可。如果你想做一屏的移動端游戲，或者上下滑動，我們也可以進行一個設(shè)置完全阻止瀏覽器默認(rèn)行為。
這基本就是我整個手勢庫的核心了。
最后丟出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
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/78822.html
摘要：主要是為了阻止微信瀏覽器的默認(rèn)滑動。四如何利用五個做到無限滑動其實我在寫第一個版本的日歷的時候，采取的解決辦法是當(dāng)新的月份產(chǎn)生之后，往中不斷。如何控制的值實現(xiàn)滑動效果，這個問題不是這次的重點。 之前寫了一篇Calendar -『為移動端而生』的自定義日歷，一直有童鞋對這個插件的手勢處理存在一些問題，所以想寫篇文章，來說說它的成長史~ 在閱讀本文之前，確保你有稍微看過 calendar ...
摘要：主要是為了阻止微信瀏覽器的默認(rèn)滑動。四如何利用五個做到無限滑動其實我在寫第一個版本的日歷的時候，采取的解決辦法是當(dāng)新的月份產(chǎn)生之后，往中不斷。如何控制的值實現(xiàn)滑動效果，這個問題不是這次的重點。 之前寫了一篇Calendar -『為移動端而生』的自定義日歷，一直有童鞋對這個插件的手勢處理存在一些問題，所以想寫篇文章，來說說它的成長史~ 在閱讀本文之前，確保你有稍微看過 calendar ...
摘要：主要是為了阻止微信瀏覽器的默認(rèn)滑動。四如何利用五個做到無限滑動其實我在寫第一個版本的日歷的時候，采取的解決辦法是當(dāng)新的月份產(chǎn)生之后，往中不斷。如何控制的值實現(xiàn)滑動效果，這個問題不是這次的重點。 之前寫了一篇Calendar -『為移動端而生』的自定義日歷，一直有童鞋對這個插件的手勢處理存在一些問題，所以想寫篇文章，來說說它的成長史~ 在閱讀本文之前，確保你有稍微看過 calendar ...
摘要：前戲今年，對于我個人而言遭遇了三個重大的轉(zhuǎn)折點。盡可能的把溝通成本用約定和文檔降低。學(xué)習(xí)的這一年可以說年的學(xué)習(xí)，在上半年的精力，放在了技術(shù)上。而下半年則相反。 前戲 今年，對于我個人而言遭遇了三個重大的轉(zhuǎn)折點。 15年9月大三休學(xué)創(chuàng)業(yè)，16年9月重新復(fù)學(xué)大三 在2016年4月順利引進天使輪，公司從廈門集美區(qū)搬到了深圳南山區(qū) 16年底，我們正在準(zhǔn)備接入A輪 16年與15年相比，總體來...
閱讀 3562·2021-08-31 09:39
閱讀 1869·2019-08-30 13:14
閱讀 2932·2019-08-30 13:02
閱讀 2778·2019-08-29 13:22
閱讀 2356·2019-08-26 13:54
閱讀 778·2019-08-26 13:45
閱讀 1597·2019-08-26 11:00
閱讀 990·2019-08-26 10:58
