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
100
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
530
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
500
iOS Training Part 2
skirchmeier
1
200
Custom iOS Controls
skirchmeier
3
180
Other Decks in Technology
See All in Technology
スタートアップで取り組んでいるAzureとMicrosoft 365のセキュリティ対策/How to Improve Azure and Microsoft 365 Security at Startup
yuj1osm
0
230
型情報を用いたLintでコード品質を向上させる
sansantech
PRO
2
110
生成AIのガバナンスの全体像と現実解
fnifni
1
200
20241214_WACATE2024冬_テスト設計技法をチョット俯瞰してみよう
kzsuzuki
3
640
【re:Invent 2024 アプデ】 Prompt Routing の紹介
champ
0
160
新機能VPCリソースエンドポイント機能検証から得られた考察
duelist2020jp
0
230
開発生産性向上! 育成を「改善」と捉えるエンジニア育成戦略
shoota
2
420
Google Cloud で始める Cloud Run 〜AWSとの比較と実例デモで解説〜
risatube
PRO
0
110
React Routerで実現する型安全なSPAルーティング
sansantech
PRO
2
180
10分で学ぶKubernetesコンテナセキュリティ/10min-k8s-container-sec
mochizuki875
3
370
KnowledgeBaseDocuments APIでベクトルインデックス管理を自動化する
iidaxs
1
270
AWS re:Invent 2024で発表された コードを書く開発者向け機能について
maruto
0
210
Featured
See All Featured
Scaling GitHub
holman
459
140k
Put a Button on it: Removing Barriers to Going Fast.
kastner
59
3.6k
Faster Mobile Websites
deanohume
305
30k
For a Future-Friendly Web
brad_frost
175
9.4k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
1
100
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
GraphQLの誤解/rethinking-graphql
sonatard
67
10k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
48k
RailsConf 2023
tenderlove
29
940
The Pragmatic Product Professional
lauravandoore
32
6.3k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
26
1.5k
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