js 实现手势库

·  阅读 798

前言

不知道各位小伙伴在工作中遇到手势操作时,第一想法是上GitHub找找有没有好用的开源项目还是自己动手实现一个呢?反正我自己是先找开源,实在没有或不好用才考虑自己开发,毕竟工作是讲究效率的嘛。自己开发费时费力,而且还会有奇奇怪怪的兼容性问题。说起相关的手势库,比较优秀的有hammer.jsAlloyFinger。我个人更喜欢AlloyFinger一点,毕竟调用方式相对简单直观,但也存在不足,比如双指缩放和双指旋转不能以双指中心为原点操作,给我的感觉怪怪的。这也是为什么我要开发NonameGesture的原因。

简单介绍

该手势库主要使用PointerEvent指针事件开发。下面表格展示的是支持的手势。代码已开源至GitHub,有需要的小伙伴自取。

支持的手势介绍触发条件
tap点击事件点击时间<500ms,且移动误差<10
singleTap单击事件,250ms延时点击时间<500ms,且移动误差<10
doubleTap双击事件,必定触发两次tap两次点击距离<30,且相隔时间<250ms
longTap长按事件按住时间>=500ms
drag拖拽事件拖拽
swipe滑动事件200ms内移动距离>=20
rotate双指旋转事件触摸点个数=2
pinch双指缩放事件触摸点个数=2
wheel鼠标滚轮缩放事件滚动鼠标滚轮

Demo

Demo:nonamegesture.codeman.top

qrcode.png

GitHub:github.com/18223781723…

demo.gif

分类:
前端
分类:
前端
收藏成功!
已添加到「」, 点击更改