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