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
Physics-Based Interfaces with UIKit Dynamics
Search
Sam Kirchmeier
March 20, 2014
Technology
0
110
Physics-Based Interfaces with UIKit Dynamics
Sam Kirchmeier
March 20, 2014
Tweet
Share
More Decks by Sam Kirchmeier
See All by Sam Kirchmeier
Exploring Stateless UIs in Swift
skirchmeier
2
630
Beyond REST: Web Services Designed for Mobile
skirchmeier
2
120
Auto Layout in iOS
skirchmeier
3
140
Bluetooth LE, Core Bluetooth, and a Glimpse Into Your Near Future
skirchmeier
0
260
Building HTML5 Tablet Apps
skirchmeier
2
510
iOS Training Part 2
skirchmeier
1
210
Custom iOS Controls
skirchmeier
3
190
Other Decks in Technology
See All in Technology
Tailwind CSS の小話「コンテナークエリーって便利」
yamaday
0
110
LINE 購物幕後推手
line_developers_tw
PRO
0
450
Next.jsと状態管理のプラクティス
uhyo
6
2.1k
Part2 GitHub Copilotってなんだろう
tomokusaba
2
790
TanStack Start 技術選定の裏側 / Findy-Lunch-LT-TanStack-Start
iktakahiro
1
130
試作とデモンストレーション / Prototyping and Demonstrations
ks91
PRO
0
120
ユーザーコミュニティが海外スタートアップのDevRelを補完する瞬間
nagauta
0
180
2025年8月から始まるAWS Lambda INITフェーズ課金/AWS Lambda INIT phase billing changes
quiver
1
1k
問 1:以下のコンパイラを証明せよ(予告編) #kernelvm / Kernel VM Study Kansai 11th
ytaka23
3
530
名単体テスト 禁断の傀儡(モック)
iwamot
PRO
1
240
データベース04: SQL (1/3) 単純質問 & 集約演算
trycycle
PRO
0
730
Cursorをチョッパヤインタビューライターにチューニングする方法 / how to tuning cursor for interview write
shuzon
2
220
Featured
See All Featured
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Code Reviewing Like a Champion
maltzj
523
40k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.2k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2k
The Invisible Side of Design
smashingmag
299
50k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.2k
The Power of CSS Pseudo Elements
geoffreycrofte
75
5.8k
Designing for humans not robots
tammielis
253
25k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
30
2.4k
Fireside Chat
paigeccino
37
3.4k
How GitHub (no longer) Works
holman
314
140k
Become a Pro
speakerdeck
PRO
28
5.3k
Transcript
Physics-Based Interfaces with UIKit Dynamics Adam May @yammada ! Sam
Kirchmeier @skirchmeier
None
None
Agenda
Introduction ! ! !
Introduction Examples ! !
Introduction Examples Deconstruction !
Introduction Examples Deconstruction Collection Views
! Examples Deconstruction Collection Views Limitations & Gotchas Introduction
Introduction
Introduced with iOS 7 Not a separate framework – built
into UIKit Can be anywhere you're using UIKit
Another tool in your tool belt
Physics-Based Interfaces
Classical Mechanics
Classical mechanics is concerned with the set of physical laws
describing the motion of bodies under the action of a system of forces.
2014
2014 2007
None
None
None
None
2014 2007
2014 2007 1972
None
Pong: the original physics-based interface.
More Recent Examples
None
None
None
None
None
None
None
None
None
None
None
None
UIKit Dynamics
Natural, real-world interactions Without very much code Beautiful API Fun
Knowledge of physics not required
UIView
UIView UIDynamicAnimator Reference View
UIView UIDynamicAnimator Reference View UIGravityBehavior
UIView UIDynamicAnimator Reference View UIGravityBehavior UICollisionBehavior
None
UIDynamicItem Protocol !
UIDynamicItem Protocol UIView UICollectionViewLayoutAttributes
UIDynamicBehaviors
UIDynamicBehavior Base Class
UICollisionBehavior UIGravityBehavior ! ! !
UICollisionBehavior UIGravityBehavior UIAttachmentBehavior UIDynamicItemBehavior UIPushBehavior UISnapBehavior
Demo
Deconstruction
None
None
UICollisionBehavior UIGravityBehavior UIAttachmentBehavior UIDynamicItemBehavior UIPushBehavior UISnapBehavior
1. Create a UIDynamicAnimator. 2. Recognize a touch, and add
an attachment behavior. 3. Update the attachment’s anchor point during the gesture. 4. When the gesture ends, add a snap behavior or a push behavior.
1. Create a UIDynamicAnimator. 2. Recognize a touch, and add
an attachment behavior. 3. Update the attachment’s anchor point during the gesture. 4. When the gesture ends, add a snap behavior or a push behavior.
1. Create a UIDynamicAnimator. 2. Recognize a touch, and add
an attachment behavior. 3. Update the attachment’s anchor point during the gesture. 4. When the gesture ends, add a snap behavior or a push behavior.
1. Create a UIDynamicAnimator. 2. Recognize a touch, and add
an attachment behavior. 3. Update the attachment’s anchor point during the gesture. 4. When the gesture ends, add a snap behavior or a push behavior.
Demo
Collection Views
Gotchas
Only 2D Hard to visualize Weird units Everything’s a square
Not perfect for games
Recap
Introduced UIKit Dynamics PhotoFling Demo TweetBattle Demo Limitations & Gotchas
Thanks!
Discussion https://github.com/livefront/dynamics Adam May @yammada ! Sam Kirchmeier @skirchmeier