23
Jonathan Penn CodeMash 2014 for iOS Physics & The User Interface F=ma

Physics & The User Interfacerubbercitywizards.com/stuff/files/2014-01-codemash-dynamics-slides.pdf[UIView animateWithDuration:3 delay:0 options:Curve... animations:^{ // transform

  • Upload
    others

  • View
    3

  • Download
    0

Embed Size (px)

Citation preview

Page 1: Physics & The User Interfacerubbercitywizards.com/stuff/files/2014-01-codemash-dynamics-slides.pdf[UIView animateWithDuration:3 delay:0 options:Curve... animations:^{ // transform

Jonathan Penn CodeMash 2014

for iOSPhysics & The User Interface

F=ma

Page 2: Physics & The User Interfacerubbercitywizards.com/stuff/files/2014-01-codemash-dynamics-slides.pdf[UIView animateWithDuration:3 delay:0 options:Curve... animations:^{ // transform

@jonathanpenn

Page 3: Physics & The User Interfacerubbercitywizards.com/stuff/files/2014-01-codemash-dynamics-slides.pdf[UIView animateWithDuration:3 delay:0 options:Curve... animations:^{ // transform

Goals1. Dynamic Animations

2. UIKit Dynamics Vocabulary

3. Demos & Comedy

Page 4: Physics & The User Interfacerubbercitywizards.com/stuff/files/2014-01-codemash-dynamics-slides.pdf[UIView animateWithDuration:3 delay:0 options:Curve... animations:^{ // transform

Slides ‘n Sample Code

rubbercitywizards.com/stuff

Page 5: Physics & The User Interfacerubbercitywizards.com/stuff/files/2014-01-codemash-dynamics-slides.pdf[UIView animateWithDuration:3 delay:0 options:Curve... animations:^{ // transform

UIKIT DYNAMICS?

Page 6: Physics & The User Interfacerubbercitywizards.com/stuff/files/2014-01-codemash-dynamics-slides.pdf[UIView animateWithDuration:3 delay:0 options:Curve... animations:^{ // transform

UIKIT

Page 7: Physics & The User Interfacerubbercitywizards.com/stuff/files/2014-01-codemash-dynamics-slides.pdf[UIView animateWithDuration:3 delay:0 options:Curve... animations:^{ // transform

[UIView animateWithDuration:3 delay:0 options:Curve... animations:^{ // transform }];

Page 8: Physics & The User Interfacerubbercitywizards.com/stuff/files/2014-01-codemash-dynamics-slides.pdf[UIView animateWithDuration:3 delay:0 options:Curve... animations:^{ // transform

LINEAR

EASED

BOUNCE

ANIMATION CURVESf(x)

Page 9: Physics & The User Interfacerubbercitywizards.com/stuff/files/2014-01-codemash-dynamics-slides.pdf[UIView animateWithDuration:3 delay:0 options:Curve... animations:^{ // transform
Page 10: Physics & The User Interfacerubbercitywizards.com/stuff/files/2014-01-codemash-dynamics-slides.pdf[UIView animateWithDuration:3 delay:0 options:Curve... animations:^{ // transform
Page 11: Physics & The User Interfacerubbercitywizards.com/stuff/files/2014-01-codemash-dynamics-slides.pdf[UIView animateWithDuration:3 delay:0 options:Curve... animations:^{ // transform

PHYSICS ENGINE101

Page 12: Physics & The User Interfacerubbercitywizards.com/stuff/files/2014-01-codemash-dynamics-slides.pdf[UIView animateWithDuration:3 delay:0 options:Curve... animations:^{ // transform

SIMULATIONapproximat

ev

Page 13: Physics & The User Interfacerubbercitywizards.com/stuff/files/2014-01-codemash-dynamics-slides.pdf[UIView animateWithDuration:3 delay:0 options:Curve... animations:^{ // transform

COLLISIONT 0

T 1

T 2

T 3

Page 14: Physics & The User Interfacerubbercitywizards.com/stuff/files/2014-01-codemash-dynamics-slides.pdf[UIView animateWithDuration:3 delay:0 options:Curve... animations:^{ // transform

WHOOPS!

Quantum Superposition!?

T 0

T 1

T 2

Page 15: Physics & The User Interfacerubbercitywizards.com/stuff/files/2014-01-codemash-dynamics-slides.pdf[UIView animateWithDuration:3 delay:0 options:Curve... animations:^{ // transform

YET, FINE TUNED BY APPLE IN CALIFORNIA

EXPENSIVE…

Page 16: Physics & The User Interfacerubbercitywizards.com/stuff/files/2014-01-codemash-dynamics-slides.pdf[UIView animateWithDuration:3 delay:0 options:Curve... animations:^{ // transform
Page 17: Physics & The User Interfacerubbercitywizards.com/stuff/files/2014-01-codemash-dynamics-slides.pdf[UIView animateWithDuration:3 delay:0 options:Curve... animations:^{ // transform

Dynamic Animator

Item

Reference View

Behavior

Behavior

Page 18: Physics & The User Interfacerubbercitywizards.com/stuff/files/2014-01-codemash-dynamics-slides.pdf[UIView animateWithDuration:3 delay:0 options:Curve... animations:^{ // transform

[ insert demo here ]

Page 19: Physics & The User Interfacerubbercitywizards.com/stuff/files/2014-01-codemash-dynamics-slides.pdf[UIView animateWithDuration:3 delay:0 options:Curve... animations:^{ // transform
Page 20: Physics & The User Interfacerubbercitywizards.com/stuff/files/2014-01-codemash-dynamics-slides.pdf[UIView animateWithDuration:3 delay:0 options:Curve... animations:^{ // transform

UICollectionView and UIKit Dynamics objc.io/issue-5/collection-views-and-uidynamics.html

My Samples rubbercitywizards.com/stuff

Apple's WWDC Videos developer.apple.com/wwdc/videos

Getting Started with UIKit Dynamics (#206) Advanced Techniques with UIKit Dynamics (#221) Exploring Scroll Views on iOS 7 (#217)

Apple’s UIKit Dynamics Catalog developer.apple.com/library/ios/samplecode/DynamicsCatalog/Introduction/Intro.html

Page 21: Physics & The User Interfacerubbercitywizards.com/stuff/files/2014-01-codemash-dynamics-slides.pdf[UIView animateWithDuration:3 delay:0 options:Curve... animations:^{ // transform
Page 22: Physics & The User Interfacerubbercitywizards.com/stuff/files/2014-01-codemash-dynamics-slides.pdf[UIView animateWithDuration:3 delay:0 options:Curve... animations:^{ // transform
Page 23: Physics & The User Interfacerubbercitywizards.com/stuff/files/2014-01-codemash-dynamics-slides.pdf[UIView animateWithDuration:3 delay:0 options:Curve... animations:^{ // transform

@jonathanpenn

Thanks!

rubbercitywizards.com

(and please feedback)