超小Web手势库AlloyFinger原理

朴灿烈づ我的快乐病毒、 2022-09-28 11:39 104阅读 0赞

目前[AlloyFinger][]作为腾讯手机QQ web手势解决方案，在各大项目中都发挥着作用。  
感兴趣的同学可以去Github看看：

[https://github.com/AlloyTeam/AlloyFinger][AlloyFinger]

在腾讯，如：兴趣部落、QQ群、QQ动漫、腾讯学院、TEDxTencent、 AlloyTeam、腾讯CDC等多个部门、团队和项目都在使用AlloyFinger。如下图所示：

[![QQ截图20161111085311][QQ_20161111085311]][QQ_20161111085311]

基本上只要有图像裁剪、图像查看的地方都会使用到AlloyFinger。因此AlloyFinger也入选了腾讯code平台的精品组件：

[![QQ截图20161111091518][QQ_20161111091518]][QQ_20161111091518]

除了国内外的项目团队都在使用AlloyFinger，国内外的各大IT网站也进行了转载报道，作为超级小的手势库，腾讯的web项目为什么不选择hammerjs而选择[AlloyFinger][]?下面从各个角度、架构、原理上进行一下分析。

## 体积    ##

[![QQ截图20161111090429][QQ_20161111090429]][QQ_20161111090429_QQ_20161111090429]

可以看到hammerjs体积远远大于AlloyFinger，对于手机QQ web加载速度性能追求极致的同学来说，使用hammerjs的大小是不可以接受的！  
那么，为什么hammerjs这么大？看下架构设计便可知晓。

## 架构设计    ##

[![QQ截图20161111090621][QQ_20161111090621]][QQ_20161111090621]

[![图片1][1]][1]

其实，hammerjs抽象出的Class还没有列举全，还有许多。所以过度工程化，导致其体积特别大。  
一个好的设计并不需要把每个逻辑点都抽象出来，局部过程化，整体OO是可以。如AlloyFinger的设计。仅仅只有Vector2和AlloyFinger，在touchstart、touchmove、touchend是可以trigger出相关的手势事件的，简单、直接！hammerjs能支持的手势，AlloyFinger都能支持。

## 具体实现    ##

众所周知，浏览器暴露了四个事件给开发者，touchstart touchmove touchend touchcancel，在这四个事件的回调函数可以拿到TouchEvent。  
TouchEvent:  
touches：当前位于屏幕上的所有手指动作的列表  
targetTouches：位于当前 DOM 元素上的手指动作的列表  
changedTouches：涉及当前事件的手指动作的列表  
TouchEvent里可以拿到各个手指的坐标，那么可编程性就这么产生了。

## Tap点按    ##

[![图片2][2]][2]

移动端click有300毫秒延时，tap的本质其实就是touchend。但是要判断touchstart的手的坐标和touchend时候手的坐标x、y方向偏移要小于30。小于30才会去触发tap。

## longTap长按    ##

[![longtap][]][longtap]

touchstart开启一个750毫秒的settimeout，如果750ms内有touchmove或者touchend都会清除掉该定时器。超过750ms没有touchmove或者touchend就会触发longTap

## swipe划    ##

[![swipe][]][swipe]

这里需要注意，当touchstart的手的坐标和touchend时候手的坐标x、y方向偏移要大于30，判断swipe，小于30会判断tap。那么用户到底是从上到下，还是从下到上，或者从左到右、从右到左滑动呢？可以根据上面三个判断得出，具体的代码如下：

<table style="font-size:12px; margin-left:0px; table-layout:auto!important; border:none!important; padding:0px!important; margin-right:0px!important; margin-bottom:0px!important; margin-top:0px!important; background:none!important; width:auto!important; border-spacing:0px!important; border-collapse:collapse!important"> 
 <tbody> 
 <tr style="background:0px center; padding:0px!important; border:none!important; vertical-align:top!important; margin:0px!important"> 
 <td style="border:0px; margin:0px!important; padding:0px!important; vertical-align:top!important; font-family:&quot;Courier New&quot;,monospace!important; color:rgb(134,134,134)!important"> 
 <div style="margin-right:0px; margin-left:0px; padding:0px; background:0px center; border:0px; white-space:nowrap; margin-top:10px!important; margin-bottom:10px!important; font-size:14px!important; line-height:15px!important"> 
 <div style="margin:0px; padding:0px 5px; font-family:inherit; background:0px center; border:0px; text-align:center; height:inherit; font-size:inherit!important; line-height:inherit!important; font-weight:inherit!important">
 1 
 </div> 
 <div style="margin:0px; padding:0px 5px; font-family:inherit; background:0px center; border:0px; text-align:center; height:inherit; font-size:inherit!important; line-height:inherit!important; font-weight:inherit!important">
 2 
 </div> 
 <div style="margin:0px; padding:0px 5px; font-family:inherit; background:0px center; border:0px; text-align:center; height:inherit; font-size:inherit!important; line-height:inherit!important; font-weight:inherit!important">
 3 
 </div> 
 </div> </td> 
 <td style="margin:0px!important; padding:0px!important; vertical-align:top!important; font-family:&quot;Courier New&quot;,monospace!important; border:0px; background:0px center; width:970px"> 
 <div style="margin:0px; padding:0px; white-space:pre; overflow:visible; background:none!important; border:none!important; color:rgb(248,248,242)!important; font-size:14px!important; line-height:15px!important"> 
 <div style="margin:0px; padding:0px 5px; font-family:inherit; background:0px center; border:0px; height:inherit; font-size:inherit!important; line-height:inherit!important; font-weight:inherit!important"> 
 _swipeDirection 
 : 
 
 function 
 
 ( 
 x1 
 , 
 
 x2 
 , 
 
 y1 
 , 
 
 y2 
 ) 
 
 { 
 </div> 
 <div style="margin:0px; padding:0px 5px; font-family:inherit; background:0px center; border:0px; height:inherit; font-size:inherit!important; line-height:inherit!important; font-weight:inherit!important"> 
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
 return 
 
 Math 
 . 
 abs 
 ( 
 x1 
 
 - 
 
 x2 
 ) 
 
 &gt;= 
 
 Math 
 . 
 abs 
 ( 
 y1 
 
 - 
 
 y2 
 ) 
 
 ? 
 
 ( 
 x1 
 
 - 
 
 x2 
 
 &gt; 
 
 0 
 
 ? 
 
 'Left' 
 
 : 
 
 'Right' 
 ) 
 
 : 
 
 ( 
 y1 
 
 - 
 
 y2 
 
 &gt; 
 
 0 
 
 ? 
 
 'Up' 
 
 : 
 
 'Down' 
 ) 
 </div> 
 <div style="margin:0px; padding:0px 5px; font-family:inherit; background:0px center; border:0px; height:inherit; font-size:inherit!important; line-height:inherit!important; font-weight:inherit!important"> 
 } 
 </div> 
 </div> </td> 
 </tr> 
 </tbody> 
</table>

## pinch捏    ##

这个手势是使用频率非常高的，如图像裁剪的时候放大或者缩小图片，就需要pinch。

[![QQ截图20161111093632][QQ_20161111093632]][QQ_20161111093632]

如上图所示，两点之间的距离比值求pinch的scale。这个scale会挂载在event上，让用户反馈给dom的transform或者其他元素的scale属性。

## rotate旋转    ##

[![QQ截图20161111093842][QQ_20161111093842]][QQ_20161111093842]

如上图所示，利用内积，可以求出两次手势状态之间的夹角θ。但是这里怎么求旋转方向呢？那么就要使用差乘（Vector Cross）。  
利用cross结果的正负来判断旋转的方向。

[![cross\_show][cross_show]][cross_show]

cross本质其实是面积，可以看下面的推导：

[![QQ截图20161111094608][QQ_20161111094608]][QQ_20161111094608]

所以，物理引擎里经常用cross来计算转动惯量，因为力矩其实要是力乘矩相当于面积：

[![QQ截图201611110946526][QQ_201611110946526]][QQ_201611110946526]

# 总结    #

主要的一些事件触发原理已经在上面讲解，还有如multipointStart、doubleTap、singleTap、multipointEnd可以看源码，不到200行的代码应该很容易消化。trigger手势事件的同时，touchStart、touchMove、touchEnd和touchCancel同样也可以监听。  
详细的Vector2和AlloyFinger代码可以去Github上查阅：  
[https://github.com/AlloyTeam/AlloyFinger][AlloyFinger]  
任何意见或者建议欢迎提issue：  
[https://github.com/AlloyTeam/AlloyFinger/issues][https_github.com_AlloyTeam_AlloyFinger_issues]

原创文章转载请注明：

转载自AlloyTeam：[http://www.alloyteam.com/2016/11/11568/][http_www.alloyteam.com_2016_11_11568]

个人建了前端学习群，旨在一起学习前端。纯净、纯粹技术讨论，非前端人员勿扰！入群加我[微信][Link 1]：iamaixiaoxiao。

![1460000008545203_w_276_h_261][]

[AlloyFinger]: https://github.com/AlloyTeam/AlloyFinger
[QQ_20161111085311]: /images/20220708/9a71498a504d4d6a9d39124369fdc134.png
[QQ_20161111091518]: /images/20220708/d8e163afb908409eb9ee8c71834becba.png
[QQ_20161111090429]: http://www.alloyteam.com/wp-content/uploads/2016/11/QQ%E6%88%AA%E5%9B%BE20161111090429-300x166.png
[QQ_20161111090429_QQ_20161111090429]: /images/20220708/a56991f2ccd94fd89d33df11e98d8dc7.png
[QQ_20161111090621]: /images/20220708/643c16666fad493b88ef2248eb778180.png
[1]: /images/20220708/89a3989174404372b008d88861a9a3a4.png
[2]: /images/20220708/b8961ae04f7742df92dc287d2433db58.png
[longtap]: /images/20220708/1dd5c527fc4648f6a2904037dffc6267.png
[swipe]: /images/20220708/224d060daf0c47f8b1376c40b1538136.png
[QQ_20161111093632]: /images/20220708/b201d34a28a744bd9a980352620154d4.png
[QQ_20161111093842]: /images/20220708/5d10ce13638d4fcc8907573f8dff7649.png
[cross_show]: http://www.alloyteam.com/wp-content/uploads/2016/11/cross_show.png
[QQ_20161111094608]: /images/20220708/ed0e3add487c46e5aac313d8196a40fa.png
[QQ_201611110946526]: /images/20220708/5f210de452184dc7b0cb272bde7de34f.png
[https_github.com_AlloyTeam_AlloyFinger_issues]: https://github.com/AlloyTeam/AlloyFinger/issues
[http_www.alloyteam.com_2016_11_11568]: http://www.alloyteam.com/2016/11/11568/
[Link 1]: http://lib.csdn.net/base/wechat
[1460000008545203_w_276_h_261]: /images/20220708/1fd90d6623d7463b9a3f5ae60c627ffc.png