教你如何预判用户手势行为

Posted jlfw

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了教你如何预判用户手势行为相关的知识,希望对你有一定的参考价值。

本文不想过多的介绍算法,只阐述核心思路

近来一直在思考,移动端的手势操作如何能更加精确。用户到底是想上下滑动呢,还是想左右滑动操作某个东西呢?

如下图,在页面有一个日历。日历是靠手势左右滑动切换上下月份(可实时滑动,而不是滑动完成的回调才切换)

技术图片

有的安卓有个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

本文转载于:猿2048https://www.mk2048.com/blog/blog.php?id=h2bhai2b2ab



以上是关于教你如何预判用户手势行为的主要内容,如果未能解决你的问题,请参考以下文章

SwiftUI手势(Gesture)进阶 : 实现任意视图的长按惯性加速行为

SwiftUI手势(Gesture)进阶 : 实现任意视图的长按惯性加速行为

SwiftUI手势(Gesture)进阶 : 实现任意视图的长按惯性加速行为

iOS手势识别器

事件处理机制之Gestures(手势)

SwiftUI:ListItem 手势