HTML5 手势检测原理和实现

澳门新葡亰娱乐在线 5

前言

随着 Hybrid 应用的丰富,HTML5
工程师们已经不满足于把桌面端体验简单移植到移动端,他们觊觎移动原生应用人性化的操作体验,特别是原生应用与生俱来的丰富的手势系统。HTML5
没有提供开箱即用的手势系统,但是提供了更底层一些的对 touch
事件的监听。基于此,我们可以做出自己的手势库。

touch.js——常见应用操作

手势

常用的 HTML5 手势可以分为两类,单点手势和两点手势。单点手势有
tap(单击),double tap(双击),long
tap(长按),swipe(挥),move(移动)。两点手势有
pinch(缩放),rotate(旋转)。

接下来我们实现一个检测这些手势的 javaScript
库,并利用这个手势库做出炫酷的交互效果。

澳门新葡亰娱乐在线 1

 

移动

关于移动手势检测我们这里不再赘述。总结一下就是在每次touchmove事件发生时,把两个位移点之间的坐标位置相减,就可以了。

基本事件:

澳门新葡亰娱乐在线,单击(tap)

手势检测的关键是用 touchstart,touchmove,touchend
三个事件对手势进行分解。

那么怎么分解单击事件呢?

  1. 在 touchstart
    发生时进入单击检测,只有一个接触点。因为单击事件限制为一个手指的动作。
  2. 没有发生 touchmove 事件或者 touchmove
    在一个很小的范围(如下图)。限制 touchmove
    在一个很小范围,是为了给用户一定的冗余空间,因为不能保证用户手指在接触屏幕的时候不发生轻微的位移。

澳门新葡亰娱乐在线 2

3.touchend 发生在
touchstart后的很短时间内(如下图)。这个时间段的阈值是毫秒级,用来限制手指和屏幕接触的时间。因为单击事件从开始到结束是很快的。
澳门新葡亰娱乐在线 3

有了上面的流程,就可以开始实现 tap 事件监测了。

_getTime() {

  return new Date().getTime(); 

}

_onTouchStart(e) {

    //记录touch开始的位置

    this.startX = e.touches[0].pageX;

    this.startY = e.touches[0].pageY;

    if(e.touches.length > 1) {

      //多点监测

      ...

    }else {

      //记录touch开始的时间

      this.startTime = this._getTime();

    }

 }

_onTouchMove(e) {

  ...

  //记录手指移动的位置

  this.moveX = e.touches[0].pageX;

  this.moveY = e.touches[0].pageY;

  ...

}

_onTouchEnd(e) {

  let timestamp = this._getTime();

  if(this.moveX !== null && Math.abs(this.moveX - this.startX) > 10 ||

    this.moveY !== null && Math.abs(this.moveY - this.startY) > 10) {

      ...

  }else {

    //手指移动的位移要小于10像素并且手指和屏幕的接触时间要短语500毫秒

    if(timestamp - this.startTime < 500) {

      this._emitEvent('onTap')

    }

  }

}

touchstart   //手指刚接触屏幕时触发

双击(double tap)

和单击一样,双击事件也需要我们对手势进行量化分解。

  1. 双击事件是一个手指的行为。所以在 touchstart
    时,我们要判断此时屏幕有几个接触点。
  2. 双击事件中包含两次独立的单击行为。理想情况下,这两次点击应该落在屏幕上的同一个点上。为了给用户一定的冗余空间,将两次点击的坐标点距离限制在10个像素以内。
    澳门新葡亰娱乐在线 4
  3. 双击事件本质是两次快速的单击。也即是说,两次点击的间隔时间很短。通过一定的测试量化后,我们把两次单击的时间间隔设为300毫秒。
    澳门新葡亰娱乐在线 5

注意双击事件中我们检测了相邻两个 touchstart 事件的位移和时间间隔。

_onTouchStart(e) {

  if(e.touches.length > 1) {

  ...

  } else {

    if(this.previousTouchPoint) {

      //两次相邻的touchstart之间距离要小于10,同时时间间隔小于300ms

      if( Math.abs(this.startX -this.previousTouchPoint.startX) < 10  &&

          Math.abs(this.startY - this.previousTouchPoint.startY) < 10 && 

          Math.abs(this.startTime - this.previousTouchTime) < 300) {

            this._emitEvent('onDoubleTap');

          }

    }

    //保存上一次touchstart的时间和位置信息

    this.previousTouchTime = this.startTime;

    this.previousTouchPoint = {

        startX : this.startX,

        startY : this.startY

     };

  }

}

touchmove    //手指在屏幕上移动时触发

发表评论

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

相关文章

网站地图xml地图