Javascript触屏手势库-jTouch

   近端时间比较忙，公司的项目把我折腾的够呛。先嗦几句，在公司的项目中遇到了原来的前端写的页面，脚本之乱，以及代码之混淆有点让我丧心病狂，所以好多时候都不极不情愿的去看那些代码。我感觉好多前端工程师应该跟我是一样的，有着几分的代码洁癖，不忍直视那些写的过于缭乱的代码，更无法忍受自己写的代码不够规矩，最最无法忍受的恐怕是自己的前端代码被后端工程师蹂躏的面目全非。无奈的是，我遇到这种情况。每天面对着那些疯草一样的代码对于我是个不小的打击，所以在闲暇之余搞了点自己感兴趣的东西，封装了这个触屏手势库--jTouch

   封装的代码有不足支出，以及bug等欢迎大家多多指正。

   Github地址：https://github.com/liutian1937/jTouch (大家可以fork项目跟踪最新进展)

jTouch的介绍

   jTouch是针对触屏浏览器提供的一个手势集合，由于我的测试环境主要是ipad，所以对于其他触屏设备的支持情况可能会有所不足。这个在后期版本升级过程中会修复。

   jTouch在手指移动上去会触发start事件，结束会触发end事件。主要支持的手势有tap(单击)，doubletap(双击)，longtap(长按)，hold(拖拽)，swipe(滑动)，flip(轻拂)，pinch(捏合，拉伸)，rotate(旋转)；除了pinch，rotate手势外，其他手势事件的回调函数都会返回data['fingerNum']值，所以在回调函数中可以根据手指的数量来拼合其他的事件。

   其中每个手势事件都会返回响应的回调函数，接受回调函数的参数值一般定义为evt和data，可自行设定。

• 其中swipe和flip可以返回方向data['direction']以及左右，上下移动的距离data['x']，data['y']，swipe事件结束会返回状态值data['status'] ==  end；

• pinch会返回type信息，即in和out，来判断向里还是向外压缩或者拉伸;返回data['scale']表示缩放比例；

• rotate同样会有direction信息来简单判断向左旋转亦或向右旋转，同时返回data['rotation']作为角度信息；

• 每个手势事件都有相应的event对象返回，其中pinch和rotate返回的与其他的event对象是不同的，这两个返回的是gesturechange的事件对象，(详细信息可以在debug模式下调试查看)

jTouch的使用

• 实例化

     var objTouch = document.getElementById('touch');

     var Touches = new jTouch(objTouch);

  
  

• 采用链式写法，

     

     Touches.on('手势名称',function(evt,data){

     //回调函数部分

     })

  
  

  
  

• 回调函数中返回相应的值

jTouch的示例

   http://liutian1937.github.io/jTouch/carousel.html

   触摸平滑移动，其中用到了单独封装的translate插件，时间有限代码略显粗糙，各位看官见谅。

   http://liutian1937.github.io/jTouch/touch.html

   稍微仿了下ipad的界面效果，有太多不足支持。长按可以触发icon抖动，双击空白取消效果，但是取消效果过程会产生抖动，希望哪位高人提点意见。其中想到了用-webkit-animation-play-state:paused;来实现，但是具体如何让动画停在第一帧不甚了解。

   另外做了个简单的图像效果，这个效果的flip效果还没有强化，关于这个效果我感觉我实现的复杂了一些，但是暂时没有想到万全之策，所以里面出现了不少的参数，哪位高人见到可以优化之。大家可以根据这个效果扩展成一个相册效果。具有左右翻的效果。

建议继续学习：

1. 移动设备手势设计初探    (阅读：2114)
2. 触屏网页设计初探（一）    (阅读：2001)
3. 探索滑动手势    (阅读：1884)
4. 取代点击操作    (阅读：1760)
5. 触屏网页设计初探 (二)    (阅读：1682)
6. 为触屏手机而设计系列1——拇指操作的“热区/死角”与“控件尺寸”    (阅读：1311)
7. 触屏键盘设计准则（内附绝密小抄）【译】    (阅读：1299)
8. 如何设计好用的触控手势    (阅读：958)
9. 移动触屏的手指触发尺寸    (阅读：919)
10. 超级小的web手势库AlloyFinger发布    (阅读：802)