H5案例分享：JS手势框架 —— Hammer.js

2016-09-30 H5案例分享 H5案例分享

JS手势框架 —— Hammer.js

一、hammer.js简介

hammerJS是一个开源的，轻量级的触屏设备javascript手势库，它可以在不需要依赖其他东西的情况下识别触摸，鼠标事件。允许同时监听多个手势、自定义识别器，也可以识别滑动方向。

二、事件

1、Rotate事件：在指定的dom区域内，当两个手指或更多手指成圆型旋转时触发（就像两个手指拧螺丝一样）。该事件分别对以下事件进行监听并处理：

Rotatestart：旋转开始；Rotatemove：旋转过程；Rotateend：旋转结束；Rotatecancel：旋转取消

2、Pinch事件：在指定的dom区域内，两个手指（默认为两个手指，多指触控需要单独设置）或多个手指相对（越来越近）移动或相向（越来越远）移动时事件。该事件事以分别对以下事件进行监听并处理：

Pinchstart：多点触控开始；Pinchmove：多点触控过程；Pinchend：多点触控结束；Pinchcancel：多点触控取消；Pinchin：多点触控时两手指距离越来越近；Pinchout：多点触控时两手指距离越来越远

3、Press事件：在指定的dom区域内触屏版本的点击事件，这个事件相当于PC端的Click事件，该不能包含任何的移动，最小按压时间为500毫秒，常用于我们在手机上用的“复制、粘贴”等功能。该事件分别对以下事件进行监听并处理：

Pressup：点击事件离开时触发

4、Pan事件：在指定的dom区域内，一个手指放下并移动事件，即触屏中的拖动事件。这个事件在屏触开发中比较常用，如：左拖动、右拖动等，如手要上使用QQ时向右滑动出现功能菜单的效果。该事件还可以分别对以下事件进行监听并处理：

Panstart：拖动开始；Panmove：拖动过程；Panend：拖动结束；Pancancel：拖动取消；Panleft：向左拖动；Panright：向右拖动；Panup：向上拖动；Pandown：向下拖动

5、Tap事件：在指定的dom区域内，一个手指轻拍或点击时触发该事件(类似PC端的click)。该事件最大点击时间为250毫秒，如果超过250毫秒则按Press事件进行处理。

6、Swipe事件：在指定的dom区域内，一个手指快速的在触屏上滑动。即我们平时用到最多的滑动事件。

Swipeleft：向左滑动；Swiperight：向右滑动；Swipeup：向上滑动；Swipedown：向下滑动

三、使用方式

//创建一个新的hammer对象并且在初始化时指定要处理的dom元素

var hammertime = new Hammer(document.getElementById("test"));

//为该dom元素指定触屏移动事件

hammertime.on("pan", function (ev) {

//控制台输出

console.log(ev);

});

四、应用实例

对图片进行拖动、缩放和旋转操作（用到hammerJS中的事件Pan、Pinch和Rotate）

核心代码：

var reqAnimationFrame = (function () {
return window[Hammer.prefixed(window, 'requestAnimationFrame')] || function (callback) {
window.setTimeout(callback, 1000 / 60);
};
})();

var el = document.querySelector("#imgid");

var START_X = Math.round((window.innerWidth - el.offsetWidth) / 2);
var START_Y = Math.round((window.innerHeight - el.offsetHeight) / 2);

var ticking = false;
var transform; //图像效果
var timer;
var initAngle = 0; //旋转角度
var initScale = 1; //放大倍数

function onPinch(ev){
if(ev.type == 'pinchstart') {
initScale = transform.scale || 1;
}
el.className = '';
transform.scale = initScale * ev.scale;
requestElementUpdate();
}

//旋转相关
var preAngle =0 ;
var tempAngleFlag=0;
var deltaAngle = 0;
var startRotateAngle = 0;

function updateElementTransform() {
var value = [
'translate3d(' + transform.translate.x + 'px, ' + transform.translate.y + 'px, 0)',
'scale(' + transform.scale + ', ' + transform.scale + ')',
'rotate3d('+ transform.rx +','+ transform.ry +','+ transform.rz +','+ transform.angle + 'deg)'
];

value = value.join(" ");
el.style.webkitTransform = value; /*为Chrome/Safari*/
el.style.mozTransform = value; /*为Firefox*/
el.style.transform = value; /*IE Opera?*/
ticking = false;
}

function requestElementUpdate() {
if(!ticking) {
reqAnimationFrame(updateElementTransform);
ticking = true;
}
}

/**
初始化设置
*/
function resetElement() {

el.className = 'animate';
transform = {
translate: { x: START_X, y: START_Y },
scale: 1,
angle: 0,
rx: 0,
ry: 0,
rz: 0
};
requestElementUpdate();
}

resetElement();

DEMO演示

五、注意事项

试着避免垂直方向上的 pan/swipe

垂直方向上的平移操作一般是用来滚动页面的，而且有些（过时的）浏览器不会传递事件，导致Hammer无法识别这些手势。

在设备上做测试

有时候Hammer需要做一些调整，像swipe的速率或其它阈值，如果你在一台反应较慢的设备上做测试，那么你要保证你的回调越简单越好。

去掉Windows Phone点击时的高亮效果

在Windows Phone上的IE10和IE11里tap某元素时，会有一个小小的tap高亮效果，加上这个meta标签可以取消这种效果：

选择不了文本

Hammer设置了一个属性用来提升桌面平移操作的用户体验（UX）。常规来说，当你在桌面级浏览器上拖动页面时，你应该是可以正常选中文本的，但user-select这个CSS属性禁用了这功能。如果你在意文本选择功能，同时觉得桌面级的体验没必要太尽善尽美，你可以很轻松地取消这个默认选项——确保在创建实例之前执行：

delete Hammer.defaults.cssProps.userSelect;

5.在tap之后，导致触发了一个click事件

这种click事件我们称之为一个“幽灵点击”事件，可创建了一个小函数来避免触摸后导致click。

六、浏览器/终端的支持

Harmmer可以运行在除了IE8及其以下的任何浏览器。浏览器若对触摸行为（touch-action）提供原生支持，那么对比那些不支持HarmmerJS某些事件的浏览器，将会有更好的体验。

以上为“H5案例分享”团队原创文章，转载请注明出处！

H5案例分享：JS手势框架 —— Hammer.js

标签

相关推荐：

H5案例分享：html5重力感应事件

使用JS判断客户端、浏览器、操作系统类型