Fork me on GitHub

移动开发框架剖析(一) Hammer专业的手势控制

一直在写jQuery的源码教程,都没时间研究别的框架了。Hammer是我项目御用的一个手势库,早期1.x版本的swipe事件的响应不灵敏的问题而改过源码,2.x就已经更正过来,而且源码的结构也整个翻新了一遍,不管从逻辑还是组织结构上,我个人都觉得有必要深入,所以就当作一个系列教程一起学习吧。

本章主要讲解下使用,因为官方的API都是英文的,中文资料也相对较少,源码的分析后续再更新。

通过网方的教程还是有很多地方不是很明白的,可能需要后期看源码才能弄懂了。

Hammer.js是一个专门用于控制、定制手势的JavaScript库。它可以识别出常见的触摸、拖动、长按、缩放等等,对于希望在网页上对手势有所处理的朋友们,应该很有帮助。

官方也表明了2.0版本是完全重写,包括手势识别器、和改进支持最近的移动浏览器利用touch-action css属性。同时还支持多种设备,所以多用户成为可能。功能上更加强大了

使用上很简单,引入源码并且创建一个实例。

 


Hammer

var hammertime = new Hammer(myElement, myOptions);
hammertime.on('pan', function(ev) {
    console.log(ev);
});

默认设置下自动添加了,tap、doubletap、press,pan与swipe的横向滑动,多点触摸pinch与rotate手势。

pinch和rotate识别器在默认情况下都是禁用的,因为他们会有元素阻塞,但是我们可以手动开启:

hammertime.get('pinch').set({ enable: true });
hammertime.get('rotate').set({ enable: true });

当然,我们还可以为pan与swipe 开启纵向滑动

hammertime.get('pan').set({ direction: Hammer.DIRECTION_ALL });
hammertime.get('swipe').set({ direction: Hammer.DIRECTION_VERTICAL

我们能通过meta的标记,禁用doubletap /触控放大。但是新的浏览器支持touch-action属性所以可以不需要这个

<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">

 


1.基本的实现

绑定一个简单的swipe事件,通过回调得到事件的响应

var mc = new Hammer(el);

mc.on('swipe',function(evt){
    console.log(evt)
})

 

2.改变事件处理的方向

但是默认情况下Hammer是屏蔽了上下滑动的响应的,所以我们如果只指竖向响应,就需要再配置中设置

mc.get('pan').set({
    direction: Hammer.DIRECTION_VERTICAL
});

mc.on('swipe',function(evt){
    console.log(evt)
})

我们还可以同时响应横向与竖向,除此之外,还可以单独为某个指定的识别器配置

var mc = new Hammer(el);

mc.get('swipe').set({
    direction: Hammer.DIRECTION_ALL
});

mc.on('swipe pan',function(evt){
    console.log(evt)
})

通过get方法我们可以得到指定对应的识别器,我们这里只给swipe启动了上下左右滑动的响应,那么pan事件则没开启,这种指定特定事件的处理相当的灵活

当然以上都是比较简单常见的事件处理,如果在一个元素上绑定多个不同的事件处理,那可以引入Hammer.Manager控制了

 

3.Hammer.Manager

我们可以通过这个Manager设置自己的识别器的实例。可以设置更多的被识别的手势。

一个复杂的多事件处理的Example https://cdn.rawgit.com/hammerjs/hammer.js/master/tests/manual/visual.html

var mc = new Hammer.Manager(myElement, myOptions);

mc.add( new Hammer.Pan({ direction: Hammer.DIRECTION_ALL, threshold: 0 }) );
mc.add( new Hammer.Tap({ event: 'quadrupletap', taps: 4 }) );

mc.on("pan", handlePan);
mc.on("quadrupletap", handleTaps);

上面的示例创建一个实例包含一个pan和一个quadrupletap手势

当然如果我们同时给一个元素上 绑定多个事件用new Hammer(el);直接通过on方法也是可以实现的

但是实际上的测试效果,识别度与灵活度比Hammer.Manager低很多。

因为Manager控制里面,引入了recognizeWith与requireFailure用来关联2个相近的事件,从而提高可用性

var pinch = new Hammer.Pinch();
var rotate = new Hammer.Rotation();
pinch.recognizeWith(rotate);

当然具体内部如何实现,要等以后源码分解才知道了。官方给的说明确实太少了

最后官方还提到提供一个神秘hammer.input事件,在每一次有用户交互的时候都会被触发,可以得到非常有用的数据

hammertime.on("hammer.input", function(ev) {
   console.log(ev.pointers);
});

 

除此之外,还有很多参数的

比如事件对象,Directions方向,输入动作Input Events,识别器状态等等

 

提供的方法Utils

类似addEventListener的事件绑定与销毁

Hammer.on(window, "load resize scroll", function(ev) {
    console.log(ev.type);
});

遍历

Hammer.each([10,20,30,40], function(item, index, src) { });
合并
var options = {
    b: false
};

var defaults = {
    a: true,
    b: true,
    c: [1,2,3]
};
Hammer.merge(options, defaults);

// options.a == true
// options.b == false
// options.c == [1,2,3]
extend,inherit,bindFn等等

hammerjs确实很强大,做了市面上大多数的设备的适配,我可以看到源码中关于适配的代码就接近一半,整个源码的结构其实也是比较规整的

大多数人能用1,2步的处理就已经完全足够了,但是这都不是重点,重点是我们要的不是使用,而且能够“造轮子”弄懂原理!

posted on 2014-10-14 17:10 【艾伦】 阅读(...) 评论(...) 编辑 收藏