摘要：目前作为腾讯手机手势解决方案，在各大项目中都发挥着作用。因此也入选了腾讯平台的精品组件除了国内外的项目团队都在使用，国内外的各大网站也进行了转载报道，作为超级小的手势库，腾讯的项目为什么不选择而选择下面从各个角度架构原理上进行一下分析。
目前AlloyFinger作为腾讯手机QQ web手势解决方案，在各大项目中都发挥着作用。
感兴趣的同学可以去Github看看：
https://github.com/AlloyTeam/AlloyFinger
在腾讯，如：兴趣部落、QQ群、QQ动漫、腾讯学院、TEDxTencent、 AlloyTeam、腾讯CDC等多个部门、团队和项目都在使用AlloyFinger。如下图所示：
基本上只要有图像裁剪、图像查看的地方都会使用到AlloyFinger。因此AlloyFinger也入选了腾讯code平台的精品组件：
除了国内外的项目团队都在使用AlloyFinger，国内外的各大IT网站也进行了转载报道，作为超级小的手势库，腾讯的web项目为什么不选择hammerjs而选择AlloyFinger?下面从各个角度、架构、原理上进行一下分析。
体积可以看到hammerjs体积远远大于AlloyFinger，对于手机QQ web加载速度性能追求极致的同学来说，使用hammerjs的大小是不可以接受的！
那么，为什么hammerjs这么大？看下架构设计便可知晓。
其实，hammerjs抽象出的Class还没有列举全，还有许多。所以过度工程化，导致其体积特别大。
一个好的设计并不需要把每个逻辑点都抽象出来，局部过程化，整体OO是可以。如AlloyFinger的设计。仅仅只有Vector2和AlloyFinger，在touchstart、touchmove、touchend是可以trigger出相关的手势事件的，简单、直接！hammerjs能支持的手势，AlloyFinger都能支持。
众所周知，浏览器暴露了四个事件给开发者，touchstart touchmove touchend touchcancel，在这四个事件的回调函数可以拿到TouchEvent。
TouchEvent:
touches：当前位于屏幕上的所有手指动作的列表
targetTouches：位于当前 DOM 元素上的手指动作的列表
changedTouches：涉及当前事件的手指动作的列表
TouchEvent里可以拿到各个手指的坐标，那么可编程性就这么产生了。
移动端click有300毫秒延时，tap的本质其实就是touchend。但是要判断touchstart的手的坐标和touchend时候手的坐标x、y方向偏移要小于30。小于30才会去触发tap。
longTap长按touchstart开启一个750毫秒的settimeout，如果750ms内有touchmove或者touchend都会清除掉该定时器。超过750ms没有touchmove或者touchend就会触发longTap
swipe划这里需要注意，当touchstart的手的坐标和touchend时候手的坐标x、y方向偏移要大于30，判断swipe，小于30会判断tap。那么用户到底是从上到下，还是从下到上，或者从左到右、从右到左滑动呢？可以根据上面三个判断得出，具体的代码如下：
_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")
}
pinch捏
这个手势是使用频率非常高的，如图像裁剪的时候放大或者缩小图片，就需要pinch。
如上图所示，两点之间的距离比值求pinch的scale。这个scale会挂载在event上，让用户反馈给dom的transform或者其他元素的scale属性。
rotate旋转如上图所示，利用内积，可以求出两次手势状态之间的夹角θ。但是这里怎么求旋转方向呢？那么就要使用差乘（Vector Cross）。
利用cross结果的正负来判断旋转的方向。
cross本质其实是面积，可以看下面的推导：
所以，物理引擎里经常用cross来计算转动惯量，因为力矩其实要是力乘矩相当于面积：
总结主要的一些事件触发原理已经在上面讲解，还有如multipointStart、doubleTap、singleTap、multipointEnd可以看源码，不到200行的代码应该很容易消化。trigger手势事件的同时，touchStart、touchMove、touchEnd和touchCancel同样也可以监听。
详细的Vector2和AlloyFinger代码可以去Github上查阅：
https://github.com/AlloyTeam/AlloyFinger
任何意见或者建议欢迎提issue：
https://github.com/AlloyTeam/AlloyFinger/issues
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/80856.html
摘要：从长按开始学习手势在项目开发过程中遇到有虚拟键盘开发的需求如下图，其中删除键需要实现长按删除输入框全部内容，由此展开今天要讨论的手势开发内容。所以长按手势实际上是由三者共同模拟的效果。 从 [长按] 开始学习 web 手势 在项目开发过程中遇到有虚拟键盘开发的需求（如下图），其中删除键需要实现 长按 删除输入框全部内容，由此展开今天要讨论的 web 手势 开发内容。 showImg(h...
摘要：高性能动画与端场景需要相比，移动端需要考虑的因素也相对复杂，重点考虑流量功耗与流畅度。而在移动端，我们选择性能更优浏览器原生实现方案动画。然而，动画在移动多终端设备场景下，相比会面对更多的性能问题，主要体现在动画的卡顿与闪烁。1.高性能CSS3动画 与PC端场景需要相比，移动web端需要考虑的因素也相对复杂，重点考虑：流量、功耗与流畅度。在pc端上考虑更多的是流畅度，而mobile web中...
摘要：拥有两个版本，无依赖的独立版和版本。除了对象，也可监听内元素的手势需要引擎内置对象支持绑定相关事件。据不完全统计，目前服务于兴趣部落群动漫腾讯学院腾讯等多个部门团队和项目。也可以在事件回调里根据携带的信息使用去操作。 简介 针对多点触控设备编程的Web手势组件，快速帮助你的web程序增加手势支持，也不用再担心click 300ms的延迟了。拥有两个版本，无依赖的独立版和react版本。...
摘要：页面调试腾讯开发维护的代码调试发布，错误监控上报，用户问题定位。同样是由腾讯开发维护的代码调试工具，是针对移动端的调试工具。前端业务代码工具库。动画库动画库，也是目前通用的动画库。 本人微信公众号：前端修炼之路，欢迎关注 本篇文章整理自己使用过的和看到过的一些插件和工具，方便日后自己查找和使用。 另外，感谢白小明，文中很多的工具来源于此。 弹出框 layer：http://layer....
阅读 2973·2023-04-25 20:09
阅读 3285·2021-11-23 09:51
阅读 1943·2021-11-22 15:25
阅读 3313·2021-11-18 10:02
阅读 2688·2021-09-27 13:56
阅读 1276·2019-08-30 15:44
阅读 1127·2019-08-30 13:21
阅读 3281·2019-08-30 11:05
