初次使用hammer.js做卡片滑动效果

 

项目新需求做卡片滑动的效果，因为大多数的一些js插件库是分开监听X和Y方向的，但是hammer.js是监听全方位，比较满足项目需求，所以初次尝试使用了下。大致如下：

具体的文档可以参考hammer.js官方文档：
http://hammerjs.github.io

我们主要使用了两个监听事件：

panmove

主要为了监听手指移动距离来移动上层图片以及下层图片放大的比例

panend

主要用来归位（实际项目后面是有逻辑请求之类的处理，本文只针对动画效果，所以后续的处理就因地制宜吧）

1、首先要先初始化新建实例：

var hammerImg = new Hammer(document.getElementById('imgGroup'));

另外由于我们是要上下左右全方位的监听，所以还要set下direction：

hammerImg.get('pan').set({ direction: Hammer.DIRECTION_ALL });

需要注意的是在某些文档上不建议这么设置全方位direction，说是会导致页面渲染卡顿，笔者试下来，感觉区别没那么大，也还好

2、监听手势滑动

hammerImg.on('panmove', function(ev) {
        console.log('监听pan', ev);
	console.log('监听方向移动', ev.direction);
	console.log('监听点击位置坐标', ev.center);
	console.log('监听滑动x轴坐标', ev.deltaX);
	console.log('监听滑动y轴坐标', ev.deltaY);
})

另外由于监听过程我们做了计算处理，为了动画流畅性考虑建议加上节流：

if (animationObj.timeStamp) {
    // 获取当前时间，算差值
	var now = new Date().getTime();
	var minus = now - animationObj.timeStamp
	if(minus < 40) { // 截流25帧
		return false;
	} else {
		// 没有记过时间则赋值记一下
		animationObj.timeStamp = new Date().getTime();
	}
}

其中后面两个图片的缩放比例就按照如下计算（移动距离之和除以屏幕1/4来取值）：
 

var proportion = (positiveX + positiveY) / (commonW / 4) > 1 ? 1 : (positiveX + positiveY) / (commonW / 4);

由于后两张图片是按照最上方图片宽度0.9和0.8显示的，最上方图片宽300，则下两张的位移一个是60一个是30，随着图片的移动计算为：

var tmpProportion = 30 * proportion;
$('#imgGroup li.item2').css(cssTransform(30 - tmpProportion, 0, 100, 0.9 + 0.1 * proportion));
$('#imgGroup li.item3').css(cssTransform(60 - tmpProportion, 0, 100, 0.8 + 0.1 * proportion));

cssTransform方法即css封装好的方法：

cssTransform: function(dx, dy, time, scale) {
    return {
		'transform': 'scale(' + scale + ') translate(' + dx + 'px,' + dy + 'px)',
		'-webkit-transform': 'scale(' + scale + ') translate(' + dx + 'px,' + dy + 'px)',
		'-moz-transform': 'scale(' + scale + ') translate(' + dx + 'px,' + dy + 'px)',
		'-o-transform': 'scale(' + scale + ') translate(' + dx + 'px,' + dy + 'px)',
		'transition-duration': time + 'ms',
		'-webkit-transition-duration': time + 'ms',
		'-moz-transition-duration': time + 'ms',
		'-o-transition-duration': time + 'ms'
    }
}

3、监听手指移开

hammerImg.on('panmove', function(ev) {
    $('#imgGroup li.item1').css(animationObj.cssTransform(0, 0, 100, 1));
    $('#imgGroup li.item2').css(animationObj.cssTransform(30, 0, 100, 0.9));
    $('#imgGroup li.item3').css(animationObj.cssTransform(60, 0, 100, 0.8));
})

 

PS：写动画尽量用translate和scale，用left,right,padding,margin之类会导致动画卡顿，在手机上尤其明显，注意！注意！注意！