移动端手势识别-常见的几种应用的原理

1.旋转

2.缩放

3.方向锁定

4.下拉刷新

旋转
原理：如图， 旋转角度为黄线与垂直线的夹角-绿线与垂直线的夹角

rotate.png

至于它们的夹角怎么算呢？这里用到了极其高深的的初中数学知识(笑哭)tanα = (a-m)/(n-b);
α=Math.atan2((n-b),(a-m))*180/Math.PI(因为这里指的是弧度,所以要乘180/Math.PI);
下面是一个具体的例子：

缩放
原理：如图 手指从黄线的位置到绿线的位置,对应的矩形比例没变，从而可以计算出缩放后的矩形宽高

scale.png

同样，一个具体的例子：

方向锁定与下拉刷新加载

所谓“方向锁定”指的是,当用户手指向下滑动页面的时候就不能左右滑动页面，相反，左右滑动页面的时候则不能上下滑动页面，有一个方向是锁定的。如果你对我说的有点疑惑，可以打开淘宝客户端滑动试试(我本人之前是没有感觉到存在方向锁定的问题)，这也应了一句话，“最好的用户体验是用户完全感觉不到的”。

怎么判断用户是想上下滑动还是左右滑动呢？很简单，定个标准，当左右滑动距离大于5时认为用户是左右滑，当上下滑动距离大于5时，认为用户是上下滑。
当然，下拉刷新也是在此基础上顺便可以实现的，因为我们已经确定了滑动方向。

具体例子请访问我的GitHub地址
https://github.com/clearlivings/dropLoad-and-direction-lock