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

since1986 发布于2019-08-19 17:45 / 1869人阅读

摘要：那接下来的问题就是如何事先判断用户意图，来选择是否阻止浏览器默认行为一仅仅通过滑动的，距离二通过手指划过的曲线斜率第一个，方法就不说了，不用想都知道不可行。

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

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

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

有的安卓有个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统计用户行为

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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