初次使用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.timeStampif(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之类会导致动画卡顿，在手机上尤其明显，注意！注意！注意！

初次使用hammer.js做卡片滑动效果相关推荐

android层叠式卡片横向轮播,小程序实现层叠卡片滑动效果
小程序层叠卡片滑动效果,供大家参考,具体内容如下效果图 wxml bindtap="choose" data-id="{{item.id}}"> wxs ...
tween.js一个平滑动效果的js动画库
tween.js一个平滑动效果的js动画库 tween.js是什么? tween.js是一款可生成平滑动效果的js动画库,允许以平滑的方式修改元素的属性值. tween.js达到什么效果? 它可以通过 ...
android 高仿探探卡片滑动,Android自定义View仿探探卡片滑动效果
Android自定义View仿探探卡片滑动这种效果网上有很多人已经讲解了实现思路,大多都用的是RecyclerView来实现的,但是我们今天来换一种实现思路,只用一个自定义的ViewGroup来搞定这 ...
js 做返回顶部效果
涉及的知识点: font-awesome字体图标:使用的cdn. window.onload 窗口加载完成事件:如果js代码写在body标签之前,则所有的js都要写在window.onload的事件中 ...
Swift中用CollectionView做广告栏滑动效果
创建一个类:PlayCollectionViewController.swift //cell重用标识 private let reuseIdentifier = "reuseIdentif ...
Vue/Nuxt.js仿Tinder|探探翻牌特效|vue仿探探卡片滑动
基于Vue.js|Nuxt.js实现探探卡片滑动切换效果陌陌|探探社交App中拖拽滑动翻牌子效果让人印象深刻,最近在开发Nuxt项目,需要实现类似这个效果,于是经过多次调试,最终实现了,现整理作些简 ...
手机端表格怎么做横向滑动，滑动时不影响上方结构
因为手机屏幕比较窄,表格数据太长超出屏幕时,需要做左右滑动效果 ,但表格滑动时发现一个bug,就是滑动时顶上的导航栏也跟着滑动了, 原因是我的table表格外面没有包一层 van-list, 加上就 ...
Android横向滚动卡片,Android仿探探卡片式滑动效果实现
前言第一次进入探探软件界面,就被这种通过卡片式滑动来选择"喜欢/不喜欢"的设计所吸引了.当时就非常想通过自己来实现这种仿探探式的效果,然而却没什么思路.不过毋庸置疑的是,这种效果 ...
用js仿探探拖拽卡片的效果、飞卡片的效果，感觉挺酷，最后有美女看哦！程序员就是可以为所欲为！
目录前两天在网上看到一个用vue写飞卡片的,觉得很有意思,我就自己想写一个,就花了点时间搞了一下,做的不好望大家多多指教. 两个主要的功能: 先看看效果: 首先要做一个盒子,然后生成几张卡片放到这个 ...

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

初次使用hammer.js做卡片滑动效果相关推荐

最新文章

热门文章