Hammer.js

Hammer.js

Transcript

1. HAMMER.JS add touch gestures to your page.
2. Multi-Touch redefined User Interface
3. Gestures http://www.lukew.com/ff/entry.asp?1071
4. where we are
5. where we are and we need more gestures
6. Gestures But…what egg use?
7. Demo Time Back off! I’m going to ZhuangBi!!!
8. What can we do with gestures?
9. What can we do with gestures? ✓ Carousel   ✓ Slider   ✓ ImagePreview   ✓ Drag&Drop&Sort ✓ ListView   ✓ SideNavigation   ✓ Games   ✓ And  More…
10. • touchstart/gesturestart   • touchmove/gesturechange   • touchend/gestureend   • touchcancel Touch & Gesture Event • e.touches   • e.targetTouches   • e.changedTouches   • e.rotation/scale   • e.pageX(Y)/clientX(Y)
11. • touchstart/gesturestart   • touchmove/gesturechange   • touchend/gestureend   • touchcancel Touch & Gesture Event • e.touches   • e.targetTouches   • e.changedTouches   • e.rotation/scale   • e.pageX(Y)/clientX(Y)
13. Why HammerJs?
14. Why HammerJs?
15. Why HammerJs? ✓ Small  (3.96kb)   ✓ Multiple  (Tap,  Pan,  Rotate…)   ✓ Compatible  (touch,  mouse,  pointerEvents)   ✓ Extensible  (easy  to  define  new  gesture)     ✓ Easy  to  Learn  (just  like  iOS  gestures)
16. Browser Support ✓ Compatible
17. How to use var hm = new Hammer(element, options); hm.on('tap', function(e) { console.log(e); }); hm.on('swipe', function(e) { console.log(e.velocity); console.log(e.direction); }); hm.on('pan', function(e) { var x = e.deltaX + 'px', y = e.deltaY + 'px'; element.style.tranform = 'translate3d(' + x + ',' + y + ',0)'; }); ✓ Multiple
18. More Control var hm = new Hammer.Manager(element); hm.add( new Hammer.Rotate({ pointers: 2 }) ); hm.add( new Hammer.Tap({ event: 'tripleTap', taps: 3 }) ); hm.on('rotate', function(e) { console.log(e.rotation); }); hm.on('tripleTap', function(e) { console.log(e.tapCount); }); ✓ Extensible
19. HammerJs vs S.EventTarget var hm = new Hammer.Manager(); hm.add( new Hammer.Tap({}) ); hm.on('tap', callback); hm.off('tap', callback); hm.emit('tap', data); var et = S.EventTarget; et.publish('select', {}); et.on('select', callback); et.detach('select', callback); et.fire('tap', data);
20. Recognizer ✓ Extensible
21. Recognizer HammerJs iOS Gesture ✓ Easy  to  Learn
22. GestureRecognizer
23. Recognizer Types
24. Recognizer States
25. recognizeWith var hm = new Hammer.Manager(element); hm.add( new Hammer.Rotate() ); hm.add( new Hammer.Pinch() ); hm.get('pinch').recognizeWith(hm.get('rotate'));
26. requireFailure var hm = new Hammer.Manager(element); var singleTap = new Hammer.Tap({ event: 'singletap' }); var doubleTap = new Hammer.Tap({event: 'doubletap', taps: 2 }); hm.add([singleTap, doubleTap]); doubleTap.recognizeWith(singleTap); singleTap.requireFailure(doubleTap);
27. touch-action https://cdn.rawgit.com/hammerjs/hammer.js/master/tests/manual/touchaction.html
28. Hammer Inside Manager Input Recognizers TouchAction touch, mouse, pen auto, pan-x, pan-y manipulation pan, pinch, press rotate, swipe, tap compute update add update init addEvent preventDefault emit
30. what’s next
31. ✓ mpi/carousel   ✓ mpi/slider   ✓ mpi/image-­‐preview   ✓ mpi/drag-­‐drop ✓ mpi/list-­‐view   ✓ mpi/side-­‐nav   ✓ act/xx-­‐game   ✓ and  more… what’s next
32. Join us!!!
33. Join us!!!
34. Join us!!!
35. • http://hammerjs.github.io/ • http://www.lukew.com/ff/entry.asp?1071 • https://developer.apple.com/library/ios/documentation/EventHandling/Conceptual/ EventHandlingiPhoneOS/GestureRecognizer_basics/ GestureRecognizer_basics.html • http://www.google.com/design/spec/patterns/gestures.html#gestures-touch- mechanics • http://www.windowsphone.com/en-us/how-to/wp7/start/gestures-flick-pan-and- stretch references
37. THE END.