Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Hammer.js
Search
ningzbruc
August 06, 2015
Programming
1
310
Hammer.js
Hammer.js
ningzbruc
August 06, 2015
Tweet
Share
More Decks by ningzbruc
See All by ningzbruc
如何写出一个优秀的开源库
ningzbruc
0
29
去啊无线前端的一天
ningzbruc
1
140
React & Component
ningzbruc
0
19
阿里旅行去啊H5首页总结&Promise
ningzbruc
0
240
KISSY.Base - all about that Base
ningzbruc
0
91
淘宝旅行门票iPad版开发
ningzbruc
0
100
Travel on KISSY mini
ningzbruc
0
160
Events
ningzbruc
2
110
Why YUI3
ningzbruc
0
180
Other Decks in Programming
See All in Programming
Kubernetes History Inspector(KHI)を触ってみた
bells17
0
220
WebDriver BiDiとは何なのか
yotahada3
1
140
さいきょうのレイヤードアーキテクチャについて考えてみた
yahiru
3
740
ファインディLT_ポケモン対戦の定量的分析
fufufukakaka
0
490
Flutter × Firebase Genkit で加速する生成 AI アプリ開発
coborinai
0
150
負債になりにくいCSSをデザイナとつくるには?
fsubal
9
2.4k
iOSエンジニアから始める visionOS アプリ開発
nao_randd
3
130
Honoとフロントエンドの 型安全性について
yodaka
5
330
社内フレームワークとその依存性解決 / in-house framework and its dependency management
vvakame
1
550
AWSマネコンに複数のアカウントで入れるようになりました
yuhta28
2
160
Pulsar2 を雰囲気で使ってみよう
anoken
0
230
“あなた” の開発を支援する AI エージェント Bedrock Engineer / introducing-bedrock-engineer
gawa
11
1.9k
Featured
See All Featured
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
9
430
Automating Front-end Workflow
addyosmani
1367
200k
The Language of Interfaces
destraynor
156
24k
Navigating Team Friction
lara
183
15k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
330
21k
Gamification - CAS2011
davidbonilla
80
5.1k
Designing for Performance
lara
604
68k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
59k
Building an army of robots
kneath
302
45k
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k
Transcript
HAMMER.JS add touch gestures to your page.
Multi-Touch redefined User Interface
Gestures http://www.lukew.com/ff/entry.asp?1071
where we are
where we are and we need more gestures
Gestures But…what egg use?
Demo Time Back off! I’m going to ZhuangBi!!!
What can we do with gestures?
What can we do with gestures? ✓ Carousel ✓
Slider ✓ ImagePreview ✓ Drag&Drop&Sort ✓ ListView ✓ SideNavigation ✓ Games ✓ And More…
• touchstart/gesturestart • touchmove/gesturechange • touchend/gestureend •
touchcancel Touch & Gesture Event • e.touches • e.targetTouches • e.changedTouches • e.rotation/scale • e.pageX(Y)/clientX(Y)
• touchstart/gesturestart • touchmove/gesturechange • touchend/gestureend •
touchcancel Touch & Gesture Event • e.touches • e.targetTouches • e.changedTouches • e.rotation/scale • e.pageX(Y)/clientX(Y)
None
Why HammerJs?
Why HammerJs?
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)
Browser Support ✓ Compatible
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
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
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);
Recognizer ✓ Extensible
Recognizer HammerJs iOS Gesture ✓ Easy to Learn
GestureRecognizer
Recognizer Types
Recognizer States
recognizeWith var hm = new Hammer.Manager(element); hm.add( new Hammer.Rotate() );
hm.add( new Hammer.Pinch() ); hm.get('pinch').recognizeWith(hm.get('rotate'));
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);
touch-action https://cdn.rawgit.com/hammerjs/hammer.js/master/tests/manual/touchaction.html
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
None
what’s next
✓ mpi/carousel ✓ mpi/slider ✓ mpi/image-‐preview ✓
mpi/drag-‐drop ✓ mpi/list-‐view ✓ mpi/side-‐nav ✓ act/xx-‐game ✓ and more… what’s next
Join us!!!
Join us!!!
Join us!!!
• 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
None
THE END.