♏️ AnimationLib-Hammer.js基本用法

version: 2.0.8
HammerJS的基本用法,更多详细内容可参考官网API
传送门:http://hammerjs.github.io/

简介

  • 完美实现移动端大多数事件:点击、滑动、拖动、多点触控等

事件

  • Pan - 拖动事件

    Panstart: 拖动开始
    Panmove: 拖动过程
    Panend: 拖动结束
    Pancancel: 拖动开始
    Panleft: 向左拖动
    Panright: 向右拖动
    Panup: 向上拖动
    Pandown: 线下拖动

  • Pinch - 两个手指的拉近拉远

    Pinchstart: 多点触控开始
    Pinchmove: 多点触控过程
    Pinchend: 多点触控结束
    Pinchcancel: 多点触控取消
    Pinchin: 多点触控时两手指距离越来越近
    Pinchout: 多点触控时两手指距离越来越远

  • Press - 相当于Click

    Pressup: 点击离开时触发

  • Rotate - 两个或多个手指旋转

    Rotatestart: 旋转开始
    Rotatemove: 旋转过程
    Rotateend: 旋转结束
    Rotatecancel: 旋转取消

  • Swipe - 滑动事件

    Swipeleft: 向左滑动
    Swiperight: 向右滑动
    Swipeup: 向上滑动
    Swipedown: 向下滑动

  • Tap - 相当于Click,最大点击时间为250ms,超过则按Press处理

基本用法

1
2
3
4
5
6
7
var oh = hammertime.on('panmove', function(ev){
if(ev.direction == 8){
//下滑, Todo:......
}else if(ev.direction == 16){
//上滑, Todo:......
}
})

常用的ev的属性

  • ev.type: 事件类型
  • ev.deltaX: X偏移量
  • ev.deltaY: Y偏移量
  • ev.direction: 方向
  • ev.distance: 移动的距离

补充

♏️ 监听 Pinch、Rotate、Swipe 时要为该demo元素指定触屏移动事件

1
2
hammertime.add(new Hammer.Pinch());
hammertime.add(new Hammer.Rotate());

♏️ 添加识别方向:DIRECTION_HORIZONTAL、DIRECTION_VERTICAL、DIRECTION_ALL

1
hammertime.get('swipe').set({ direction: Hammer.DIRECTION_VERTICAL });

♏️ 多个事件监听

  • 1.创建管理器

    1
    2
    3
    4
    5
    6
    /**
    * 创建管理器
    * @param {String} myElement [dom]
    * @param {String} myOptions [配置参数] eg: inputTarget/touchAction/recognizers
    */
    var mc = new Hammer.Manager(myElement, myOptions)
  • 2.给Manager添加识别器,重名的会被下面的覆盖

    1
    2
    mc.add(new Hammer.Pan({}));
    mc.add(new Hammer.Tap({}));
  • 3.绑定事件

    1
    2
    mc.on('pan', handler);
    mc.on('tap', handler);
  • 4.触发某个事件,把data发送给监听者( data 是自定义数据 Object )

    1
    mc.emit('pan', data);
  • 5.解绑事件

    1
    mc.off('pan', handler);
  • 6.销毁 Manager ,并且解除所有绑定的事件

    1
    mc.destroy();