Hammer.js

해당 게시글은 2022.03.14에 깃허브로 작성되었습니다.

 

---

 

1. Hammer.js

Hammer.js란 Touch, Mouse, Pointer 이벤트들로부터 제스쳐를 식별하는 오픈소스 라이브러리이다.

장점은 아래와 같다.

- Pinch, Rotate와 같은 멀티터치 제스쳐 지원
- 가벼운 용량
- 대부분의 IOS, ANDROID OS 버전 지원
- jQuery 같은 라이브러리없이 독립적으로 사용 가능
- jQuery.plugin, Auglarjs.diretive 지원
- 제스쳐 이벤트 발생 제어 가능

 

그 외에도 jQuery mobile 라이브러리에서도 기본적인 터치 제스쳐를 지원하지만 멀티 터치 액션은 지원하지 않거나 각 플러그인별 사용법이 다르다는 등, 여러가지 면에서 Hammer.js를 추천한다.

 

Hammer.js의 압축 파일은 아래 링크에서 확인 가능하다.

GitHub - rlacodud/UID

 

 

---

 

2. Hammer.js API

그럼 Hammer.js의 기본 구조를 알아보자.

 

(1) constructor(HTMLElement, [options])

먼저 script를 적용시킬 개체(이벤트 실행 개체)를 찾아준 뒤, 해당 개체를 Manager에 적용하고 recognizer 또한 생성한다.

var myElement = document.querySelector('myElement');
var mc = new Hammer.Manager(myElement);
var recognizer = new Hammer.recognizer({
  options
});

 

(2) get(string) | add(Recognizer) | remove(Recognizer)

그 뒤로는 recognizer를 개체에 추가하여 실행요건이 될 이벤트의 종류를 정의한다.

mc.get('pinch');
mc.get(myPinchRecognizer);

mc.add(myPinchRecognizer);
mc.add([mySecondRecogizner, myThirdRecognizer]);

mc.remove(myPinchRecognizer);
mc.remove('rotate');
mc.remove([myPinchRecognizer, 'rotate']);

 

(3) on(events, handler) | off(events, handler)

이제 설정은 끝났으니 해당 개체에 적용시킨 recognizer를 요건으로 하는 handler를 작성하여 원하는 이벤트를 만들어보자.

mc.on("pinch", function(ev) {
    console.log(ev.scale);
});

 

---

 

3. 적용

아래 다양한 recognizer예제를 보며 실제 적용 방법을 익혀보자.

 

[Tap]

GitHub - rlacodud/UID

 

[Double Tap]

 

GitHub - rlacodud/UID

 

[Press]

GitHub - rlacodud/UID

 

 

[Swipe]

GitHub - rlacodud/UID