移动开发框架剖析(一) 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步的处理就已经完全足够了,但是这都不是重点,重点是我们要的不是使用,而且能够“造轮子”弄懂原理!
移动开发框架剖析(一) Hammer专业的手势控制的更多相关文章
- 移动开发框架剖析(二) Hammer专业的手势控制
浏览器底层并没有给元素提供类似,单击,双击,滑动,拖动这些直接可以用的控制接口,一切的手势动作都只能通过模拟出来.移动端浏览器唯一给我们提供的就只是mousedown -> mousemove ...
- Swift实战-豆瓣电台(九)简单手势控制暂停播放(全文完)
Swift实战-豆瓣电台(九)简单手势控制暂停播放 全屏清晰观看地址:http://www.tudou.com/programs/view/tANnovvxR8U/ 这节我们主要讲UITapGestu ...
- Unity3D中使用Leap Motion进行手势控制
Leap Motion作为一款手势识别设备,相比于Kniect,长处在于准确度. 在我的毕业设计<场景漫游器>的开发中.Leap Motion的手势控制作为重要的一个环节.以此,谈谈开发中 ...
- MIT 黑科技:通过脑电波和手势控制机器人
简评:麻省理工黑科技,虽然现在能实现的操作还很简单,但前景(想象空间)非常巨大. 通常,控制机器人并不容易,常规手段就是编程.但是地球上从来不缺天马行空的科学家,今日 MIT 的计算机科学与人工智能实 ...
- Hololens开发笔记之Gesture手势识别(Manipulation手势控制物体旋转)
Manipulation gesture:保持点击手势,在3D世界中绝对运动 当你想要全息图像1:1响应用户手部移动时,操纵手势能被用于移动.缩放或旋转全息图像.如此的一个用处是使得用户可以在世界中绘 ...
- Hololens开发笔记之Gesture手势识别(Manipulation手势控制物体平移)
Manipulation gesture:保持点击手势,在3D世界中绝对运动 当你想要全息图像1:1响应用户手部移动时,操纵手势能被用于移动.缩放或旋转全息图像.如此的一个用处是使得用户可以在世界中绘 ...
- 简单的拖动手势控制侧拉view显示
通过 UIPanGestureRecognizer 手势来控制侧拉view的显示 在QHLViewController.m文件中,先添加一些宏定义和参数等等. #define QHLAnimatin ...
- 使用Vitamio打造自己的Android万能播放器(2)—— 手势控制亮度、音量、缩放
前言 本章继续完善播放相关播放器的核心功能,为后续扩展打好基础. 声明 欢迎转载,但请保留文章原始出处:) 博客园:http://www.cnblogs.com 农民伯伯: http://ove ...
- 【转载】Unity3D研究院之IOS触摸屏手势控制镜头旋转与缩放
前几篇文章介绍了很多Unity3D引擎自身的一些问题, 今天我们在回到IOS设备上讨论一些触摸屏幕手势,本章的目标是通过触摸iPhone屏幕手势 实现模型左右的旋转,与模型的缩放. 大家想一想模型的旋 ...
随机推荐
- 使用maven引入Apache poi jar包
maven构建的项目-->pom.xml文件 eclipse提供Dependencies直接添加依赖jar包的工具:直接搜索poi以及poi-ooxml即可,maven会自动依赖需要的jar包: ...
- 关于 某编译错误: This function or variable may be unsafe. Consider using strcat_s instead. To disable deprecation, use _CRT_SECURE_NO_WARNINGS.
每次当八月在VS2013里使用strcat的时候,基本上都会出现这个问题╮(╯▽╰)╭ 原因貌似是因为安全问题(⊙o⊙) 于是,解决方法如下: ①更改预处理定义: (这也是八月最常用的方法了,虽然貌似 ...
- JBoss CLI
转自http://www.cnblogs.com/inteliot/archive/2012/08/05/2623719.html 为 了便于维护和管理, JBoss AS 7 提供了命令行接口( ...
- [Java基础]java中this和super
一.this关键字 1.this概念 (参考:http://www.cnblogs.com/xdp-gacl/p/3636071.html) this是一个引用,它指向自身的这个对象,它的内存分析 ...
- 在chrome下的文本框sendkeys,提示element can't focus--解决方法
在chrome下的文本框sendkeys,提示element can't focus--解决方法(成都-半步流雲,群友解决) 成都-半步流雲1.升级你的chromedriver,2.降chrome版本 ...
- GNU Makefile编写
[Introduction] make 是程序员很好用的工具,如果存在makefile存在,每次更新代码,执行shell命令 shell 就可以执行所有需要编译的文件,make是根据你编写的Makef ...
- 使用 {$INCLUDE} 或 {$I} 指令管理和调用自定义函数
这是一个简单.方便而又实用的小技巧. 譬如这段代码中有四个定义函数: MyAdd.MyDec.MyMul.MyDiv unit Unit1; interface uses Windows, Mes ...
- 由 s:hidden 引起的文本框内容不能传到 struts的Action中
<s:form id="startForm" name ="startForm" action="/hall/hall_startList.do ...
- C++11新特性总结 (一)
1. 概述 最近在看C++ Primer5 刚好看到一半,总结一下C++11里面确实加了很多新东西,如果没有任何了解,别说自己写了,看别人写的代码估计都会有些吃力.C++ Primer5是学习C++1 ...
- PCWIFI--无线网络共享软件
前段时间由于需要共享笔记本无线网络给手机使用,在网上找了几个软件试了一下,没找到比较好用的,要么是收费的,要么有广告,要么附带一大堆其他功能,所以决定自己写一个小软件来实现该功能.软件相关介绍如下: ...