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

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

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

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

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