HTML5 手势检测原理和实现

澳门新葡亰赌995577 8

前言

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

在手机H5页面开发需求中,我们经常遇到一些手势需求,例如:pinch,
rotate澳门新葡亰赌995577,,multipointStartpressMoveTapdoubleTaplongTapswipe。以上手势没有原生事件的支持,所以需要自己通过一些方法实现。这篇文章旨在介绍原生触摸事件,以及如果利用原生事件实现各种手势。demogithub
touch-finger扫描二维码体验

手势

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

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

澳门新葡亰赌995577 1

澳门新葡亰赌995577 2image.png

移动

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

  • touchstart:当触点与触控设备表面接触时触发touchstart 事件.
  • touchend: 当触点离开触控平面时触发touchend事件.
  • touchmove: 当触点在触控平面上移动时触发touchmove事件。
  • touchcancel: 当触控点被特定的实现方式打乱时触发 touchcancel
    事件(例如, 创建了太多的触控点)。

单击(tap)

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

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

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

澳门新葡亰赌995577 3

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

有了上面的流程,就可以开始实现 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')

    }

  }

}

Interface Interface 描述了触摸事件的单个触摸点。
Touch对象是不可变的; 创建一个后,其属性不得更改。

双击(double tap)

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

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

注意双击事件中我们检测了相邻两个 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

     };

  }

}
Attributes
  • clientX: readonly 点相对于视口的水平坐标,不包括任何滚动偏移
  • clientY: readonly 点相对于视口的垂直坐标,不包括任何滚动偏移
  • identifier: readonly
    每个触摸点的标识号。当触摸点变为活动状态时,必须为其分配与任何其他活动触摸点不同的
    标识符。触摸点保持活动状态时,引用它的所有事件都必须为其指定相同的标识符。
  • pageX: readonly 点相对于视口的水平坐标,包括任何滚动偏移
  • pageY: readonly 点相对于视口的垂直坐标,包括任何滚动偏移
  • screenX: readonly 点相对于屏幕的水平坐标
  • screenY: readonly 点相对于屏幕的垂直坐标
  • target :类型为EventTarget,readonly
    的事件目标在其上的触摸点开始,当它被首先放置在表面上,即使触摸点自移动该元素的交互区域之外。

TouchList Interface 定义触摸事件的各个联系点列表。
TouchList对象是不可变的; 创建一个后,其内容不得更改。

长按(long press)

长按应该是最容易分解的手势。我们可以这样分解:在 touchstart
发生后的很长一段时间内,如果没有发生 touchmove 或者 touchend
事件,那么就触发长按手势。

  1. 长按是一个手指的行为,需要检测屏幕上是否只有一个接触点。
  2. 如果手指在空间上发生了移动,那么长按事件取消。
  3. 如果手指在屏幕上停留的时间超过800ms,那么触发长按手势。
  4. 如果手指在屏幕上停留的时间小于800ms,也即 touchend 在 touchstart
    发生后的800ms内触发,那么长按事件取消。
    澳门新葡亰赌995577 7

_onTouchStart(e) {

  clearTimeout(this.longPressTimeout);

  if(e.touches.length > 1) {

  }else {

    this.longPressTimeout = setTimeout(()=>{

      this._emitEvent('onLongPress');

    });

  }

}

_onTouchMove(e) {

  ...

  clearTimeout(this.longPressTimeout);

  ...

}

_onTouchEnd(e) {

  ...

  clearTimeout(this.longPressTimeout);

  ...

}
Attributes
  • length: readonly returns the number of Touches in the list

定义touchstart,touchend, touchmove和touchcancel事件类型。
TouchEvent对象是不可变的; 在创建并初始化一个之后,其属性不得更改。

缩放(pinch)

缩放是一个非常有趣的手势,还记得第一代iPhone双指缩放图片给你带来的震撼吗?虽然如此,缩放手势的检测却相对简单。

  1. 缩放是两个手指的行为,需要检测屏幕上是否有两个接触点。
  2. 缩放比例的量化,是通过两次缩放行为之间的距离的比值得到,如下图。
    澳门新葡亰赌995577 8

所以缩放的核心是获取两个接触点之间的直线距离。

//勾股定理

_getDistance(xLen,yLen) {
   return Math.sqrt(xLen * xLen + yLen * yLen);
  }

这里的xLen是两个接触点x坐标差的绝对值,yLen相应的就是y坐标差的绝对值。

_onTouchStart(e) {

  if(e.touches.length > 1) {

    let point1 = e.touches[0];

    let point2 = e.touches[1];

    let xLen = Math.abs(point2.pageX - point1.pageX);

    let yLen = Math.abs(point2.pageY - point1.pageY);

    this.touchDistance = this._getDistance(xLen, yLen);

  } else {

    ...

  }

}

在_onTouchStart函数中获取并且保存 touchstart
发生时两个接触点之间的距离。

_onTouchMove(e) {

  if(e.touches.length > 1) {

      let xLen = Math.abs(e.touches[0].pageX - e.touches[1].pageX);

      let yLen = Math.abs(e.touches[1].pageY - e.touches[1].pageY);

      let touchDistance = this._getDistance(xLen,yLen);

      if(this.touchDistance) {

        let pinchScale = touchDistance / this.touchDistance;

          this._emitEvent('onPinch',{scale:pinchScale - this.previousPinchScale});

          this.previousPinchScale = pinchScale;

      }

  }else {

    ...

  }

}
Attributes
  • altKey: 类型为boolean,readonly true
    如果alt(Alternate)键修饰符被激活; 除此以外false
  • changedTouches: 类型TouchList,只读
    Touch为活动做出贡献的每个联系点 touches 列表。

说明:* touchstart事件: 这必须是刚刚对当前事件激活的触摸点列表。*
touchmove事件: 这必须是自上次事件以来已移动的触摸点列表。*
touchendtouchcancel: 这必须是刚从表面移除的触摸点列表。

  • ctrlKey: 类型为boolean,readonly true 如果ctrl键修饰符被激活;
    除此以外false
  • metaKey: 类型为boolean,readonly true 如果meta键修饰符被激活;
    否则false。在某些平台上,此属性可能会映射到不同名称的键修饰符。
  • shiftKey: 类型为boolean,readonly true 如果移位键修改器被激活;
    除此以外false
  • targetTouches: 类型TouchList,只读
  • Touch: 触摸表面并从作为当前事件目标的元素开始的 每个接触点 touches
    列表。
  • touches: 类型 TouchList,只读 Touch当前接触表面的每个接触点
    touches 列表。

浏览器暴露了四个事件给开发者,touchstart touchmove touchend
touchcancel,在这四个事件的回调函数可以拿到TouchEvent

发表评论

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

相关文章

网站地图xml地图