首页 > 代码库 > 实现一个javascript手势库 -- base-gesture.js
实现一个javascript手势库 -- base-gesture.js
现在移动端这么普及呢,我们在手机上可以操作更多了。对于网页来说实现一些丰富的操作感觉也是非常有必要的,对吧(如果你仅仅需要click,,那就当我没说咯。。。)~~比如实现上下,左右滑动,点击之类的,加上这些东西就感觉网页会库不少呢~~(舒服)。当然啦。原生javascript并没有为我们提供这些花里胡哨的东西,需要我们自己去实现下喽。又当然,,现在还是有许多js手势库的,比如hammer.js之类的。但是,学习是一个重复造轮子的过程(不知道那位伟人所多,如果无人认领,那就是我说的~~~~~~~~~)对吧。自己造个轮子玩,可能不能用在跑车上,但或许用在拖拉机上不错也说不定喽.
好啦,好啦,前戏就这么多。下面就是主题啦。。说说实现一个自己的手势库。我把它叫做base-gesture.js 传送门在次:gesture(GitHub。。。star一下可好)
然后嘞,讲讲思路喽。(仅仅是我个人的想法。。不做任何保证,也不负责。打我呀~)一个小起点,在移动端呢,如果使用click会有个300ms延迟,原因是移动端需要一个双击放大的判断,所以导致这个问题,具体点可以自己gooole或百度.为了避免这个问题我们就需要对touchstart,touchend这两个事件进行监听,已实现一个tap事件。然后你有非常好学,去百度了下,发现它们还有一个touchmove兄弟事件存在。。在我看来这三兄弟和mousedown,mouseup,mousemove贼像,那我们就可以利用这三个事件来实现一些基本的手势操作了。我实现呢。主要是在touchstart得时候记录一个startX,和一个startY就是起始位置啦。然后在touchmove时候在记录一个endX和一个ewndY。现在我们有两个点的坐标了哦。那就好说了,稍微运用下数学知识求下两点之间的夹角,有这个夹角了,你在判断下endX-startX以及endY-startY的正负你就可以基本实现了判断上,下左右滑动了哦~~还行吧
当然,有这些还是不够的,我们知道,(你必须知道)touchstart只在按下屏幕那一刻触发,这就导致startX与startY只要手指不松开,它就不会变,而这个直接导致的问题就是,你左划后再继续右划,之前的判断方法依然判断为左划,,直到到你右划过了起始点。哇,这个问题就很尴尬了。。简直是废的喽。这就需要解决下喽。我呢,决定多加几个参数辅助下喽,第一组就是compareX和compareY他们在touchstart时候初始化和startx和starty值一样喽,需要他们呢主要是不希望startX和startY值不要变(后面还有用),他们就替代去完成一些任务,在touchmove可能就会更新它们的值(中途方向改变的时候)。然后就是两个数组了,gatherX以及gatherY。他们的第一位保存的是上一次触发touchmove时候记录的endX/Y-compareX/Y的值,第二位保存的是当前endX/Y-compareX/Y的值,这个时候我们就要判断gatherX/Y[1]-gatherX/Y的时候大小了,如果它小于零,恭喜你,它方向改变了(不知道有没有讲清楚,大概意识就是你从家里出去一直向外走了100米记录保存在gatherX/Y第一位上,下一秒这个距离变成94米了,保存在第二位上,一减小于零,说明你回头走了呀)。这个时候,把compareX/Y等于endX/endY表示一个新的手势的起点,然后gatherX/gatherY清空,这样就基本实现了,就算它中途非常手贱的不停移动,也没问题,也能触发正确对应事件。
基本的框架能思路就是这样了,他至少能判断上下左右滑动了。当然为了让它实用一点我为event加了两个属性,event.gapX/Y表示距离上一次触发touchmove在X/Y轴上滑动的距离,以及evnt.moveX/Y表示手势结束到手势开始的位置的距离。这两个还是非常有用的。。至少我这么认为(因为是本宝宝想的~~)。有了这些主要思路,接下来你就给他们封装性下,实现个小插件就可以了啊,上面右地址,你可以直接看,readme感觉基本上也都血比较清楚(感觉有点乱~~~),请务必提意见以及发现的问题啊,大家一起学习。我呢,用自己的轮子造了两辆破车,破车1,破车2(绝对正经私家车)。第二个例子就是一个类似整页上划的东西啦。
对了,还实现了对鼠标的支持,思路一样啦,就是该成相应的mouse事件就可以啦,就这些啦,希望大家一起进步与完善,让这个轮子更牛逼,说不定那天能成为跑车主胎呢(好吧,可能脑子太困糊涂了)。共勉啦,欢迎提问,以及拍砖哦
实现一个javascript手势库 -- base-gesture.js