H5实现一个移动端手势库系列——手势的判断方法

移动端的多点触控对用户来说非常方便,用户能放大、缩小、拖拽、旋转等操作。

但是对于程序来说又极其复杂,程序怎么来判定用户的一个操作是放大而不是旋转呢,怎么判断一个操作是拖拽而不是长按呢?

任何便利的背后都有艰辛的付出。

这篇文章针对H5平台,只谈原理,不写代码,单纯的介绍移动端各个手势的判断条件。

还没有关注公众号的朋友,请扫描二维码,或者识别图片二维码,码字不易,关注一波哦~

公众号郑重承诺:只推送原创内容

image.png

单击事件 tap

如果你是安卓或者IOS平台的朋友,或许你会感觉奇怪。单击事件怎么也算一个手势了呢?

前面说了,这里针对的平台是H5移动端。在H5中有个坑,默认的点击事件click存在300ms的延时,这个tap事件的诞生就是为了去除这个延时。

它的判断条件如下:

1、触摸过程中只有一个接触点

2、触摸时间小于某个阈值,一般是300ms

3、触摸过程中不能存在移动事件(此条件为理想化条件,实际不可能实现)

双击事件 doubletap

双击,即用户连续点击屏幕固定区域。它的判断条件是建立在单击之上的,条件如下:

1、存在两次tap事件

2、两次tap事件的x、y坐标必须在某个阈值内,一般是10px

3、两次tap事件的时间间隔必须在某个阈值内,一般是300ms

长按事件 longtap

长按的判断条件跟tap类似,只不过是大于某个阈值。条件如下:

1、触摸过程中只有一个接触点

2、触摸时间大于某个阈值,一般是750ms

3、触摸过程中不能存在移动事件(此条件为理想化条件,实际不可能实现)

滑动事件 swipe

滑动事件比较有意思,移动端可以用它来切换页面,切换场景。它的手势是一根手指快速向某个方向滑动。

条件如下:

1、触摸过程中只有一个接触点

2、触摸时间小于某个阈值,一般是300ms

3、触摸过程中必须存在移动事件,且移动距离必须大于某个阈值,一般是30px

旋转事件 rotate

上面那些事件只需要一个手指就能完成,旋转事件属于多点触控范围,需要至少两个触摸点。它的判断条件相对比较简单,如下:

1、触摸过程中至少有两个接触点,实际中也是取最先接触的两个触摸点进行计算

2、触摸过程中存在移动

缩放事件 zoom

缩放事件和旋转事件实际是同时触发的。它的判断条件跟旋转事件一样。只不过,旋转是计算角度,缩放是计算距离。判断条件如下:

1、触摸过程中至少有两个接触点,实际中也是取最先接触的两个触摸点进行计算

2、触摸过程中存在移动

预告:

这篇文章只是简单介绍常见手势的判断条件,可能各个手势事件的名字跟其他库不一样,不过原理都是大同小异。

下篇文章,我们来补充一点H5多点触控的基础知识,为我们后续实现手势库奠定基础,敬请期待。

系列的示例其实已经写好了,忍不住想看看朋友可以访问链接http://www.lizhiqianduan.com/products/ycc/examples/multi-touch/ ,手机端查看才有多点触控的效果哦~

最后

不要忘了关注官方公众号哦~发布的优质文章能第一时间通知您哦~只需要扫文章顶部的二维码就行了,感谢您的支持!

公众号郑重承诺:只推送原创干货

image.png



打赏作者

发表评论

电子邮件地址不会被公开。 必填项已用*标注