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
320
Hammer.js
Hammer.js
ningzbruc
August 06, 2015
Tweet
Share
More Decks by ningzbruc
See All by ningzbruc
如何写出一个优秀的开源库
ningzbruc
0
40
去啊无线前端的一天
ningzbruc
1
150
React & Component
ningzbruc
0
27
阿里旅行去啊H5首页总结&Promise
ningzbruc
0
240
KISSY.Base - all about that Base
ningzbruc
0
100
淘宝旅行门票iPad版开发
ningzbruc
0
110
Travel on KISSY mini
ningzbruc
0
170
Events
ningzbruc
2
110
Why YUI3
ningzbruc
0
180
Other Decks in Programming
See All in Programming
ニーリーにおけるプロダクトエンジニア
nealle
0
750
Railsアプリケーションと パフォーマンスチューニング ー 秒間5万リクエストの モバイルオーダーシステムを支える事例 ー Rubyセミナー 大阪
falcon8823
5
1.1k
既存デザインを変更せずにタップ領域を広げる方法
tahia910
1
270
5つのアンチパターンから学ぶLT設計
narihara
1
150
Cursor AI Agentと伴走する アプリケーションの高速リプレイス
daisuketakeda
1
130
Kotlin エンジニアへ送る:Swift 案件に参加させられる日に備えて~似てるけど色々違う Swift の仕様 / from Kotlin to Swift
lovee
1
260
dbt民主化とLLMによる開発ブースト ~ AI Readyな分析サイクルを目指して ~
yoshyum
3
570
Rubyでやりたい駆動開発 / Ruby driven development
chobishiba
1
600
都市をデータで見るってこういうこと PLATEAU属性情報入門
nokonoko1203
1
590
システム成長を止めない!本番無停止テーブル移行の全貌
sakawe_ee
1
160
High-Level Programming Languages in AI Era -Human Thought and Mind-
hayat01sh1da
PRO
0
710
20250628_非エンジニアがバイブコーディングしてみた
ponponmikankan
0
650
Featured
See All Featured
Gamification - CAS2011
davidbonilla
81
5.3k
It's Worth the Effort
3n
185
28k
Writing Fast Ruby
sferik
628
62k
Faster Mobile Websites
deanohume
307
31k
Build The Right Thing And Hit Your Dates
maggiecrowley
36
2.8k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.5k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
281
13k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.8k
Raft: Consensus for Rubyists
vanstee
140
7k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
Testing 201, or: Great Expectations
jmmastey
42
7.6k
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.