资讯专栏INFORMATION COLUMN

AlloyFinger web 手势学习

seanlook / 1695人阅读

摘要:从长按开始学习手势在项目开发过程中遇到有虚拟键盘开发的需求如下图,其中删除键需要实现长按删除输入框全部内容,由此展开今天要讨论的手势开发内容。所以长按手势实际上是由三者共同模拟的效果。

从 [长按] 开始学习 web 手势

在项目开发过程中遇到有虚拟键盘开发的需求(如下图),其中删除键需要实现 长按 删除输入框全部内容,由此展开今天要讨论的 web 手势 开发内容。

先放出实现代码:

var $input = document.getElementById("input");
var $delBtn = document.getElementById("delBtn");
var delBtnClock = null;
$delBtn.ontouchstart = function () {
    $input.innerHTML = $input.innerHTML.slice(0, -1)
    delBtnClock = setTimeout(function () {
        $input.innerHTML = "";
    }, 500);
}
$delBtn.ontouchend = function () {
    clearTimeout(delBtnClock);
    delBtnClock = null;
}

关键代码就两句话:

在 touchstart 事件中开启计时,这里是计时 500 ms 后,删除输入框内容

在 touchend 事件中清除 setTimeout 计时器

如果只是点击,此时 touchend 距离 touchstart 肯定不到 500 ms,计时器在时间没到前已被删除,实现的效果就只是退格;如果长按超过 500 ms,计时器执行,实现输入框内容全部删除。

所以 长按 手势实际上是由 touchstart & touchend & setTimeout 三者共同模拟的效果。

实际上,常规的 js 事件只支持 click、touchstart、touchend、touchmove、touchcancel 这五种与点击相关的事件,如果想实现更多的诸如旋转、放大缩小之类的手势的话,就需要结合上面的五种事件和其他方法来模拟实现了。

下面我将来介绍下传说中的《超级小的 web 手势库:AlloyFinger》

学习 AlloyFinger

业内知名的强大的 web 手势库 hammer.js,总共有 3240 行代码,压缩版的 44.7 kb。与之相比,AlloyFinger 真的称得上超级小了,326 行代码,10 倍的差距,在 “kb 必争” 移动 web 应用里,AlloyFinger 一下就引起了广大开发者的注意,代码量小,功能又齐全,你还要什么单车呢。(我是不是得找人家要下广告费)

在 AlloyFinger 里,手势一共有 14 种,除了常规的 4 种 touchstart,touchmove,touchend 和 touchcancel,还有 10 种由以上 4 种衍生出来的手势如下:

multipointStart:多点开始

multipointEnd:多点结束

tap:点击,效果如 click

doubleTap:双击

longTap:长按

singleTap:单击情况下 250 ms 内没有再次点击(会同时触发 tap,tap 在前)

rotate:旋转(同时触发 pressMove)

pinch:放大缩小

pressMove:单点移动

twoFingerPressMove:多点移动

swipe:扫滑,在 touchend 里触发,与 touchmove 稍有不同

原理

multipointStart

touchstart 中,触点多于 1 个时触发

multipointEnd

touchend 中,触点少于 2 个时触发(一开始还在想是不是 bug,实际的意思是:最后一个手指离开时触发)

tap

touchend 中,触点没有移动(移动横纵距离小于 30 px),且没有触发 longTap 时(距离 touchStart 时间少于 750 ms)触发

doubleTap

touchend 中,有上一次的点击记录 & 点击时间差小于 250 ms & 两次点击间没有移动(移动横纵距离小于 30 px)

longTap

touchstart 中,添加 750 ms 计时器,在这个时间段内没有松手(touchEnd)移动(touchMove),则触发

singleTap

touchend 中,单击情况下 250 ms 内没有再次点击

rotate

touchmove 中,触点多于 1 个,并存在上一次的多点移动记录时触发

pinch

touchmove 中,触点多于 1 个 & 存在上一次的移动记录 & 有缩放长度记录时触发

pressMove

touchmove 中,触点等于 1 个

twoFingerPressMove

touchmove 中,触点多于 1 个

swipe

touchend 中,触点有移动(移动横纵距离大于 30 px)

生命周期

重点

代码中多处使用 setTimeout(function () {}, 0);, 一方面实现同步转异步,释放线程,另一方面也能确保屏幕滚动时阻止事件的触发

滑动时,以最大的移动方向决定水平和竖直方向

_swipeDirection: function (x1, x2, y1, y2) {
            return Math.abs(x1 - x2) >= Math.abs(y1 - y2) ? (x1 - x2 > 0 ? "Left" : "Right") : (y1 - y2 > 0 ? "Up" : "Down")
        }

在阅读源码过程中,对关键代码做了注释,点我

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/92927.html

相关文章

  • 超小Web手势AlloyFinger原理

    摘要:目前作为腾讯手机手势解决方案,在各大项目中都发挥着作用。因此也入选了腾讯平台的精品组件除了国内外的项目团队都在使用,国内外的各大网站也进行了转载报道,作为超级小的手势库,腾讯的项目为什么不选择而选择下面从各个角度架构原理上进行一下分析。 目前AlloyFinger作为腾讯手机QQ web手势解决方案,在各大项目中都发挥着作用。感兴趣的同学可以去Github看看: https://git...

    Karuru 评论0 收藏0
  • 超级小的web手势AlloyFinger发布

    摘要:拥有两个版本,无依赖的独立版和版本。除了对象,也可监听内元素的手势需要引擎内置对象支持绑定相关事件。据不完全统计,目前服务于兴趣部落群动漫腾讯学院腾讯等多个部门团队和项目。也可以在事件回调里根据携带的信息使用去操作。 简介 针对多点触控设备编程的Web手势组件,快速帮助你的web程序增加手势支持,也不用再担心click 300ms的延迟了。拥有两个版本,无依赖的独立版和react版本。...

    ymyang 评论0 收藏0
  • 基础触屏手势学习

    摘要:最近接到一个小的项目,需要实现触屏滑动,图片缩放旋转移动,故而花了三天时间学习并实现了一下,在此记录一下学习过程关键就是触屏手势用到的技术过渡转换我就不说了,与是属于轻量级的触屏手势封装库,其中水平移动用的是别的功能用的是。 最近接到一个小的项目,需要实现触屏滑动,图片缩放旋转移动,故而花了三天时间学习并实现了一下,在此记录一下学习过程:关键就是css、 触屏手势用到的技术:css过...

    leo108 评论0 收藏0
  • 基础触屏手势学习

    摘要:最近接到一个小的项目,需要实现触屏滑动,图片缩放旋转移动,故而花了三天时间学习并实现了一下,在此记录一下学习过程关键就是触屏手势用到的技术过渡转换我就不说了,与是属于轻量级的触屏手势封装库,其中水平移动用的是别的功能用的是。 最近接到一个小的项目,需要实现触屏滑动,图片缩放旋转移动,故而花了三天时间学习并实现了一下,在此记录一下学习过程:关键就是css、 触屏手势用到的技术:css过...

    leanxi 评论0 收藏0

发表评论

0条评论

seanlook

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<