SlideShare a Scribd company logo
1 of 23
Download to read offline
Making Your Apps
Dynamic
An Introduction to UIKit Dynamics
Andria Jensen
Founder, Logical Zen
@andriajensen
andria@logicalzen.com
Demo Project: bit.ly/360-dynamics
What does it mean?
• Realistic effects and animations
• Using real-world ideas and behaviors to make
your app feel more natural
• Powered by a 2D physics engine
The Basics
• UIDynamicAnimator
• UIDynamicBehavior
• UIDynamicItem
UIDynamicAnimator
• The link between you and the physics engine
• You must create and retain an animator for use
• Reference view to house the animations
self.animator = [[UIDynamicAnimator alloc] initWithReferenceView:self.view];
UIDynamicBehavior
• Definition of how items interact
• An animator may have any number of behaviors
• Gravity, Collision, Push, Attachment, Snap
• …. or anything
gravityBehavior = [[UIGravityBehavior alloc] initWithItems:@[view]];
UIDynamicItem
• The item that you’d like to use dynamic
behavior(s)
• Anything adopting the UIDynamicItem protocol
• UIView and UICollectionViewLayoutAttributes
UIDynamicAnimator
UIDynamicItem
(UIView)
UIDynamicBehavior
(Gravity)
UIDynamicBehavior
(Collision)
UIDynamicItem
(UIView)
UIDynamicItem
(UIView)
UIDynamicItem
(UIView)
UISnapBehavior
• Snaps a view to a specified point
• Can adjust damping value (0 to 1, 0.5 is default)
• Adding the behavior triggers a single snap action
snapBehavior = [[UISnapBehavior alloc] initWithItem:self.dynamicView
snapToPoint:point];
!
snapBehavior.damping = 0.5;
[self.animator addBehavior:snapBehavior];
DEMO
UIGravityBehavior
• Standard UIKit gravity: 1 = 1000 points/second
2
• gravityDirection: default is 0,1 for a standard downward force
• (angle & magnitude) OR gravityDirection
• Only one allowed per animator
gravityBehavior = [[UIGravityBehavior alloc] initWithItems:@[view]];

gravityBehavior.gravityDirection = CGVectorMake(0.0, 1.0);

[self.animator addBehavior:gravityBehavior];
UIPushBehavior
• A continuous or instantaneous force
• Similar to the gravity behavior, but takes view size into account
• Adjust (angle & magnitude) OR pushDirection
• UIKit Newton measurement 

1N = Force to move a 100x100 view at 100 pixels/second2
• Use the active property to turn a push behavior on/off
UIPushBehavior
pushBehavior = [[UIPushBehavior alloc] initWithItems:@[view]
mode:UIPushBehaviorModeContinuous];
pushBehavior.pushDirection = CGVectorMake(0.5, 0.5);
pushBehavior.active = NO;
!
[self.animator addBehavior:pushBehavior];
!
DEMO
UIAttachmentBehavior
• Anchors an item to a given point, or another item
• Can adjust length, frequency, & damping
• Think of attachments like springs between items
• Default attachment point is item’s center
• Use with gestures to make moving views around easy
UIAttachmentBehavior
attachment = [[UIAttachmentBehavior alloc] initWithItem:self.blueView
attachedToItem:self.orangeView];
!
attachment.length = 100.0;
attachment.frequency = 0.1;
attachment.damping = 0.2;
!
[self.animator addBehavior:attachment];
UIAttachmentBehavior
- (IBAction) handlePanGesture:(UIPanGestureRecognizer *)gesture {
CGPoint touchPoint = [gesture locationInView:self.view];
UIView* draggedView = gesture.view;
if (gesture.state == UIGestureRecognizerStateBegan) {
// pan started, create an attachment starting at the initial touch point
self.panAttachment = [[UIAttachmentBehavior alloc] initWithItem:draggedView
attachedToAnchor:touchPoint];
[self.animator addBehavior:self.panAttachment];
}
else if (gesture.state == UIGestureRecognizerStateChanged) {
// update the anchor point as the pan is moving around
self.panAttachment.anchorPoint = touchPoint;
}
else if (gesture.state == UIGestureRecognizerStateEnded) {
// remove the attachment behavior as soon as the pan ends
[self.animator removeBehavior:self.panAttachment];
}
}
DEMO
UICollisionBehavior
• Collisions between boundaries or items
• Use translatesReferenceBoundsIntoBoundary to make your
reference view’s frame the boundary
• Use collisionMode to specify whether items collide with
boundaries, other items, or both
• Multiple collision behaviors can be added to an animator
• Use UICollisionDelegate to know when collisions occur
UICollisionBehavior
collisionBehavior = [[UICollisionBehavior alloc] initWithItems:collisionViews];
collisionBehavior.translatesReferenceBoundsIntoBoundary = YES;
[collisionBehavior addBoundaryWithIdentifier:identifier
fromPoint:origin
toPoint:topRightPoint];
!
[self.animator addBehavior:collisionBehavior];
UIDynamicItemBehavior
velocity
friction
elasticity
resistance
density
allowsRotation
DEMO
Composite Behaviors
• A combination of several behaviors
• Use a UIDynamicBehavior subclass to easily re-
use composite behaviors
• [self addChildBehavior:collisionBehavior]
Questions?
Andria Jensen
Founder, Logical Zen
!
@andriajensen
andria@logicalzen.com
Demo Project: bit.ly/360-dynamics

More Related Content

Similar to UiKit Dynamics-360idev2014

Session 13 - Working with navigation and tab bar
Session 13 - Working with navigation and tab barSession 13 - Working with navigation and tab bar
Session 13 - Working with navigation and tab bar
Vu Tran Lam
 
Hackatron - UIKit Dynamics
Hackatron - UIKit DynamicsHackatron - UIKit Dynamics
Hackatron - UIKit Dynamics
Renzo G. Pretto
 
iOS Development: What's New
iOS Development: What's NewiOS Development: What's New
iOS Development: What's New
NascentDigital
 
iOS UIkit Dynamic
iOS UIkit DynamiciOS UIkit Dynamic
iOS UIkit Dynamic
Seta Cheam
 
iOS 上 self-sizing cell 的過去、現在、與未來
iOS 上 self-sizing cell 的過去、現在、與未來iOS 上 self-sizing cell 的過去、現在、與未來
iOS 上 self-sizing cell 的過去、現在、與未來
Jeff Lin
 

Similar to UiKit Dynamics-360idev2014 (20)

004
004004
004
 
Session 13 - Working with navigation and tab bar
Session 13 - Working with navigation and tab barSession 13 - Working with navigation and tab bar
Session 13 - Working with navigation and tab bar
 
Hackatron - UIKit Dynamics
Hackatron - UIKit DynamicsHackatron - UIKit Dynamics
Hackatron - UIKit Dynamics
 
Сергій Міськів, «SwiftUI: Animations»
Сергій Міськів, «SwiftUI: Animations»Сергій Міськів, «SwiftUI: Animations»
Сергій Міськів, «SwiftUI: Animations»
 
iOS Development: What's New
iOS Development: What's NewiOS Development: What's New
iOS Development: What's New
 
занятие6
занятие6занятие6
занятие6
 
Celtra builder features - Motion Graphics
Celtra builder features - Motion GraphicsCeltra builder features - Motion Graphics
Celtra builder features - Motion Graphics
 
Intro to UIKit • Made by Many
Intro to UIKit • Made by ManyIntro to UIKit • Made by Many
Intro to UIKit • Made by Many
 
Introduction of Xcode
Introduction of XcodeIntroduction of Xcode
Introduction of Xcode
 
IOS APPs Revision
IOS APPs RevisionIOS APPs Revision
IOS APPs Revision
 
Introduction to auto layout
Introduction to auto layoutIntroduction to auto layout
Introduction to auto layout
 
iOS UIkit Dynamic
iOS UIkit DynamiciOS UIkit Dynamic
iOS UIkit Dynamic
 
Model Driven App Development for iPhone and Android
Model Driven App Development for iPhone and AndroidModel Driven App Development for iPhone and Android
Model Driven App Development for iPhone and Android
 
Mastering Material Motion
Mastering Material MotionMastering Material Motion
Mastering Material Motion
 
iOS Training Session-3
iOS Training Session-3iOS Training Session-3
iOS Training Session-3
 
I os 11
I os 11I os 11
I os 11
 
iOS 上 self-sizing cell 的過去、現在、與未來
iOS 上 self-sizing cell 的過去、現在、與未來iOS 上 self-sizing cell 的過去、現在、與未來
iOS 上 self-sizing cell 的過去、現在、與未來
 
Advance UIAutomator : Documentaion
Advance UIAutomator : DocumentaionAdvance UIAutomator : Documentaion
Advance UIAutomator : Documentaion
 
iOS: View Controllers
iOS: View ControllersiOS: View Controllers
iOS: View Controllers
 
Riacon swiz
Riacon swizRiacon swiz
Riacon swiz
 

Recently uploaded

Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
panagenda
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Safe Software
 
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
?#DUbAI#??##{{(☎️+971_581248768%)**%*]'#abortion pills for sale in dubai@
 

Recently uploaded (20)

Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
 
presentation ICT roal in 21st century education
presentation ICT roal in 21st century educationpresentation ICT roal in 21st century education
presentation ICT roal in 21st century education
 
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
 
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
 
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
 
Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationScaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organization
 
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)
 
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
 
Real Time Object Detection Using Open CV
Real Time Object Detection Using Open CVReal Time Object Detection Using Open CV
Real Time Object Detection Using Open CV
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
 
Manulife - Insurer Innovation Award 2024
Manulife - Insurer Innovation Award 2024Manulife - Insurer Innovation Award 2024
Manulife - Insurer Innovation Award 2024
 
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
 
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...
 
Artificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : UncertaintyArtificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : Uncertainty
 
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost SavingRepurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
 
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
 
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps ScriptAutomating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Script
 
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdfUnderstanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
 
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
 
Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024
 

UiKit Dynamics-360idev2014

  • 1. Making Your Apps Dynamic An Introduction to UIKit Dynamics Andria Jensen Founder, Logical Zen @andriajensen andria@logicalzen.com Demo Project: bit.ly/360-dynamics
  • 2. What does it mean? • Realistic effects and animations • Using real-world ideas and behaviors to make your app feel more natural • Powered by a 2D physics engine
  • 3. The Basics • UIDynamicAnimator • UIDynamicBehavior • UIDynamicItem
  • 4. UIDynamicAnimator • The link between you and the physics engine • You must create and retain an animator for use • Reference view to house the animations self.animator = [[UIDynamicAnimator alloc] initWithReferenceView:self.view];
  • 5. UIDynamicBehavior • Definition of how items interact • An animator may have any number of behaviors • Gravity, Collision, Push, Attachment, Snap • …. or anything gravityBehavior = [[UIGravityBehavior alloc] initWithItems:@[view]];
  • 6. UIDynamicItem • The item that you’d like to use dynamic behavior(s) • Anything adopting the UIDynamicItem protocol • UIView and UICollectionViewLayoutAttributes
  • 8. UISnapBehavior • Snaps a view to a specified point • Can adjust damping value (0 to 1, 0.5 is default) • Adding the behavior triggers a single snap action snapBehavior = [[UISnapBehavior alloc] initWithItem:self.dynamicView snapToPoint:point]; ! snapBehavior.damping = 0.5; [self.animator addBehavior:snapBehavior];
  • 10. UIGravityBehavior • Standard UIKit gravity: 1 = 1000 points/second 2 • gravityDirection: default is 0,1 for a standard downward force • (angle & magnitude) OR gravityDirection • Only one allowed per animator gravityBehavior = [[UIGravityBehavior alloc] initWithItems:@[view]];
 gravityBehavior.gravityDirection = CGVectorMake(0.0, 1.0);
 [self.animator addBehavior:gravityBehavior];
  • 11. UIPushBehavior • A continuous or instantaneous force • Similar to the gravity behavior, but takes view size into account • Adjust (angle & magnitude) OR pushDirection • UIKit Newton measurement 
 1N = Force to move a 100x100 view at 100 pixels/second2 • Use the active property to turn a push behavior on/off
  • 12. UIPushBehavior pushBehavior = [[UIPushBehavior alloc] initWithItems:@[view] mode:UIPushBehaviorModeContinuous]; pushBehavior.pushDirection = CGVectorMake(0.5, 0.5); pushBehavior.active = NO; ! [self.animator addBehavior:pushBehavior]; !
  • 13. DEMO
  • 14. UIAttachmentBehavior • Anchors an item to a given point, or another item • Can adjust length, frequency, & damping • Think of attachments like springs between items • Default attachment point is item’s center • Use with gestures to make moving views around easy
  • 15. UIAttachmentBehavior attachment = [[UIAttachmentBehavior alloc] initWithItem:self.blueView attachedToItem:self.orangeView]; ! attachment.length = 100.0; attachment.frequency = 0.1; attachment.damping = 0.2; ! [self.animator addBehavior:attachment];
  • 16. UIAttachmentBehavior - (IBAction) handlePanGesture:(UIPanGestureRecognizer *)gesture { CGPoint touchPoint = [gesture locationInView:self.view]; UIView* draggedView = gesture.view; if (gesture.state == UIGestureRecognizerStateBegan) { // pan started, create an attachment starting at the initial touch point self.panAttachment = [[UIAttachmentBehavior alloc] initWithItem:draggedView attachedToAnchor:touchPoint]; [self.animator addBehavior:self.panAttachment]; } else if (gesture.state == UIGestureRecognizerStateChanged) { // update the anchor point as the pan is moving around self.panAttachment.anchorPoint = touchPoint; } else if (gesture.state == UIGestureRecognizerStateEnded) { // remove the attachment behavior as soon as the pan ends [self.animator removeBehavior:self.panAttachment]; } }
  • 17. DEMO
  • 18. UICollisionBehavior • Collisions between boundaries or items • Use translatesReferenceBoundsIntoBoundary to make your reference view’s frame the boundary • Use collisionMode to specify whether items collide with boundaries, other items, or both • Multiple collision behaviors can be added to an animator • Use UICollisionDelegate to know when collisions occur
  • 19. UICollisionBehavior collisionBehavior = [[UICollisionBehavior alloc] initWithItems:collisionViews]; collisionBehavior.translatesReferenceBoundsIntoBoundary = YES; [collisionBehavior addBoundaryWithIdentifier:identifier fromPoint:origin toPoint:topRightPoint]; ! [self.animator addBehavior:collisionBehavior];
  • 21. DEMO
  • 22. Composite Behaviors • A combination of several behaviors • Use a UIDynamicBehavior subclass to easily re- use composite behaviors • [self addChildBehavior:collisionBehavior]
  • 23. Questions? Andria Jensen Founder, Logical Zen ! @andriajensen andria@logicalzen.com Demo Project: bit.ly/360-dynamics