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
18
阿里旅行去啊H5首页总结&Promise
ningzbruc
0
240
KISSY.Base - all about that Base
ningzbruc
0
90
淘宝旅行门票iPad版开发
ningzbruc
0
100
Travel on KISSY mini
ningzbruc
0
160
Events
ningzbruc
2
110
Why YUI3
ningzbruc
0
170
Other Decks in Programming
See All in Programming
Immutable ActiveRecord
megane42
0
130
SpringBoot3.4の構造化ログ #kanjava
irof
2
970
Kanzawa.rbのLT大会を支える技術の裏側を変更する Ruby on Rails + Litestream 編
muryoimpl
0
220
TokyoR116_BeginnersSession1_環境構築
kotatyamtema
0
110
Honoのおもしろいミドルウェアをみてみよう
yusukebe
1
200
Introduction to kotlinx.rpc
arawn
0
630
Java Webフレームワークの現状 / java web framework at burikaigi
kishida
9
2.2k
[Fin-JAWS 第38回 ~re:Invent 2024 金融re:Cap~]FaultInjectionServiceアップデート@pre:Invent2024
shintaro_fukatsu
0
400
Amazon Bedrock Multi Agentsを試してきた
tm2
1
280
AWS Lambda functions with C# 用の Dev Container Template を作ってみた件
mappie_kochi
0
240
XStateを用いた堅牢なReact Components設計~複雑なClient Stateをシンプルに~ @React Tokyo ミートアップ #2
kfurusho
1
770
バックエンドのためのアプリ内課金入門 (サブスク編)
qnighy
8
1.7k
Featured
See All Featured
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k
Fireside Chat
paigeccino
34
3.2k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
99
18k
RailsConf 2023
tenderlove
29
1k
Building a Scalable Design System with Sketch
lauravandoore
460
33k
Building Adaptive Systems
keathley
40
2.4k
Faster Mobile Websites
deanohume
306
31k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
31
2.1k
A better future with KSS
kneath
238
17k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
193
16k
The Language of Interfaces
destraynor
156
24k
Designing for humans not robots
tammielis
250
25k
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.