手势模型和Angular Material的实现

时间：2022-01-01 05:58:47

iPhone的出现让手势操作大为流行，也使得手势编程成为开发人员的挑战。 拟物设计也把手势编程纳入在内，大概也想制定一个在交互模型标准。现阶段因为MD还在预发布阶段，因此还只实现了单点手势（一个指头），可是已经有足够的东西值得学习，无论对我们应用还是自己设计手势编程都是大有裨益。

Angular Material有两个手划控件mdSwipeLeft和mdSwipeRight,然而真正的代码支持却不在这两个控件的定义中，而是在核心代码中，文件位置src\core\services\gesture\gesture.js这里也就是我们深入研究手势实现的地方。

基本屏幕事件

做过界面的人都熟悉mousedown, mouseup, mousemove等事件，很多后台函数多与这些事件绑定，从而能够与用户交互。但是这些事件都有些单薄而僵硬，手势事件却更友好和人性化，这也是其大受欢迎的根本原因。

手势事件不是空中楼阁，它们本身是需要这些基本事件的支持，这些基本屏幕事件也就成为了手势模型的一个组成部分，成为最底的一层。

这些事件首先被划分为三类，说是三类，理解成三个事件更为恰当，它们与手指与屏幕的交互一一对应：开始事件就是手指按下屏幕；移动事件就是手指在屏幕移动；结束事件就是手指离开屏幕。非常简单而直观。

从下面MD对这三类事件的定义，我们也可以看到每类事件中的变体大都与设备的不同有关而不是真正的不同事件，如鼠标的按下，和手指的按下。这也是我上面说的把它们理解为三个事件更为恰当。

  • START_EVENTS =>'mousedown touchstart pointerdown';
  • MOVE_EVENTS => 'mousemove touchmove pointermove';
  • END_EVENTS => 'mouseup mouseleave touchend touchcancel pointerup pointercancel';

手势归纳

基本事件都是瞬间事件，不存在延时和逻辑判断，按下就是按下，松开就是松开；这也是称之为基本事件的原因。

而手势却恰恰相反，

  • 手势是综合事件，如滑动手势，直观的感觉就是手指按下快速向左（右）滑动，并同时松开手指，这整个过程完成才是一个滑动手势。
  • 手势还有逻辑判断，还是滑动手势，不仅仅要在以上的全过程之后才激发，手指的还要超过一定的速度才能算是滑动手势。

因此，可以把手势看作在基本事件之上的一个封装，在MD的实现也是用GestureHandler的函数还侦听基本事件然后作出综合处理。

侦听

这里是MD绑定基本事件的代码：

angular.element(document)

  .on(START_EVENTS, gestureStart)

  .on(MOVE_EVENTS, gestureMove)

  .on(END_EVENTS, gestureEnd)

MD移动事件的侦听处理函数：

function gestureMove(ev) {

  if (!pointer || !typesMatch(ev, pointer)) return;

  updatePointerState(ev, pointer);

  runHandlers('move', ev);

}

其它两个（开始和结束事件）都与此类似，只不过有更多的处理过程。这个因为简单，可以用来好好分析关键过程。我们可以看到，这个侦听函数的关键一步就是调用处理器(runHandler)。这个函数内部并不复杂，只是简单的遍历预存处理器，然后调用该处理器定义的对应的基本事件处理器。这个处理器就是手势处理器，它会分析归纳基本事件当条件满足时触发手势事件。

手势处理器$$MdGestureHandler

MD用工厂(factory)的方式定义了手势处理器的模板(或者可以理解为基类帮助理解),这个factory名称就是$$MdGestureHandler，为了便于理解，我们把它分解成三部分来看。

基本屏幕事件处理

第一部分：4个方法，分别与三类基本屏幕事件对应(cancel是辅助方法),也是用来分别处理三类屏幕事件的，上面的runHandler就是调用的源头。

start: function(ev, pointer) {

	if (this.state.isRunning) return;

	var parentTarget = this.getNearestParent(ev.target);

	var parentTargetOptions = parentTarget && parentTarget.$mdGesture[this.name] || {};

	this.state = {

	isRunning: true,

	options: angular.extend({}, this.options, parentTargetOptions),

	registeredParent: parentTarget

	};

	this.onStart(ev, pointer);

	},

move: function(ev, pointer) {

	if (!this.state.isRunning) return;

	this.onMove(ev, pointer);

	},

end: function(ev, pointer) {

	if (!this.state.isRunning) return;

	this.onEnd(ev, pointer);

	this.state.isRunning = false;

	},

cancel: function(ev, pointer) {

	this.onCancel(ev, pointer);

	this.state = {};

},
优化的屏幕事件

第二部分：4个内部事件，也是基本与以上4个方法对应，并在4个方法中适当的时机触发，可以看作是对原始基本事件的梳理之后的重新抛出。 你如果创建自己的手势处理器，要做的也就是重载这4个事件。从以下代码我们也可以看到，MD为每一个事件给出了空实现(`angular.noop')，目的就是为了让自定义处理器自己重载实现。

onStart: angular.noop,

onMove: angular.noop,

onEnd: angular.noop,

onCancel: angular.noop,
手势的触发

第三部分：也是最后最关键的一个方法，手势事件的触发dispatchEvent。自定义的手势处理器最终都是要调用这个方法来触发手势事件。大部分触发时机都在onEnd中，当是不是必须的，要根据你具体的手势的含义来定。

dispatchEvent的实现：

dispatchEvent: dispatchEvent,

...

/*

* NOTE: dispatchEvent is very performance sensitive.

*/

function dispatchEvent(srcEvent, eventType, eventPointer, /*original DOMEvent */ev) {

	eventPointer = eventPointer || pointer;

	var eventObj;

	if (eventType === 'click') {

	  eventObj = document.createEvent('MouseEvents');

	  eventObj.initMouseEvent(

	    'click', true, true, window, ev.detail,

	    ev.screenX, ev.screenY, ev.clientX, ev.clientY,

	    ev.ctrlKey, ev.altKey, ev.shiftKey, ev.metaKey,

	    ev.button, ev.relatedTarget || null

	  );

	} else {

	  eventObj = document.createEvent('CustomEvent');

	  eventObj.initCustomEvent(eventType, true, true, {});

	}

	eventObj.$material = true;

	eventObj.pointer = eventPointer;

	eventObj.srcEvent = srcEvent;

	eventPointer.target.dispatchEvent(eventObj);

}

手势实例解析

手势内部实现过程虽然较为复杂，以上的流程解析也是为了更好的理解从而有个直观的感觉。到了每一个手势的实现时，真正用到的却不算多，主要就是那4个优化的事件onStart, onMove, onEnd, onCancel和一个触发的方法'dispatchEvent`。我们来看看一些手势实例，亲身感受一下，良好建模以后的手势实现。

滑动手势 - Swipe
屏幕事件 触发条件 触发事件
[无]
按下
移动
移动
移动
移动
松开 超过最低速度和位移 $md.swiperight
[无]
拖动手势 - Drag
屏幕事件 触发条件 触发事件
[无]
按下
移动
移动 当前触点与起点位移超过阀值 $md.dragstart
移动 $md.drag
移动 $md.drag
松开 $md.dragend
[无]

相关文章