UIKit Dynamics

UIKit Dynamics
Craig VanderZwaag

craig@bluehulastudios.com
Tuesday, October 15, 13

@bHCraigV

ADD DEPTH
AND GRAVITY
AND WEIGHT
AND DELIGHT!


UIKIT DYNAMICS
• New

in iOS7 SDK

• Brings

real-world physics and interaction
behaviors to your apps

• 2-Dimensional

interaction


animations and

HOW?
• Integrated

physics engine and animator

• PhysicsKit-

Shared with the new Sprite
Kit framework

• Based


on Box 2D http://box2d.org

CONCEPTS
• Dynamic

Items

• Dynamic

Behaviors

• Dynamic Animators


DYNAMIC ITEMS
• Objects

that can be animated

• Minimal

set of geometry properties

• Don’t

necessarily have to be views or
even on screen


DYNAMIC BEHAVIORS
• Encapsulate
• Associated

a set of “physical” attributes and behaviors

to dynamic items to impart them with

behaviors
• Gravity, Collision, Friction
• Resistance, Velocity, Attachment
• Can

Be composed in a hierarchy


DYNAMIC ANIMATOR
• Coordinates

a view

the dynamic items and behaviors in

• Updates

the “scene” with each step of the
animation

• Holds

all the behaviors that describe how
dynamic items react


STEP ONE:
CREATE A DYNAMIC ITEM
@protocol UIDynamicItem NSObject
@property (nonatomic, readwrite) CGPoint center;
@property (nonatomic, readonly) CGRect bounds;
@property (nonatomic, readwrite) CGAffineTransform transform;
@end

NS_CLASS_AVAILABLE_IOS(2_0) @interface UIView :
UIResponderNSCoding, UIAppearance, UIAppearanceContainer,
UIDynamicItem {


STEP ONE:
CREATE A DYNAMIC ITEM
- (void)viewDidLoad
{
[super viewDidLoad];
CGRect frame = {CGPointZero, {100.0, 100.0}};
self.button = [[UIButton alloc] initWithFrame:frame];
self.button.backgroundColor = [UIColor purpleColor];
[self.view addSubview:self.button];
...
}


STEP TWO:
CREATE A DYNAMIC ANIMATOR
NS_CLASS_AVAILABLE_IOS(7_0) @interface UIDynamicAnimator: NSObject
- (instancetype)initWithReferenceView:(UIView*)view;
- (void)addBehavior:(UIDynamicBehavior *)behavior;
- (void)removeBehavior:(UIDynamicBehavior *)behavior;
- (void)removeAllBehaviors;
@property (nonatomic, readonly) UIView* referenceView;
@property (nonatomic, readonly, copy) NSArray* behaviors;


STEP TWO:
CREATE A DYNAMIC ANIMATOR
@implementation ViewController
- (void)viewDidLoad
{
...
self.animator = [[UIDynamicAnimator alloc]
initWithReferenceView:self.view];
...
}


STEP THREE:
ADD BEHAVIORS
NS_CLASS_AVAILABLE_IOS(7_0) @interface UIDynamicBehavior : NSObject
- (void)addChildBehavior:(UIDynamicBehavior *)behavior;
- (void)removeChildBehavior:(UIDynamicBehavior *)behavior;
@property (nonatomic, readonly, copy) NSArray* childBehaviors;
// When running, the dynamic animator calls the action block on
every animation step.
@property (nonatomic,copy) void (^action)(void);
- (void)willMoveToAnimator:(UIDynamicAnimator *)dynamicAnimator; //
nil when being removed from an animator
@property (nonatomic, readonly) UIDynamicAnimator *dynamicAnimator;
@end


STEP THREE:
ADD BEHAVIORS- GRAVITY
NS_CLASS_AVAILABLE_IOS(7_0) @interface UIGravityBehavior :
UIDynamicBehavior
- (instancetype)initWithItems:(NSArray *)items;
- (void)addItem:(id UIDynamicItem)item;
- (void)removeItem:(id UIDynamicItem)item;
@property (nonatomic, readonly, copy) NSArray* items;
// The default value for the gravity vector is (0.0, 1.0)
// The acceleration for a dynamic item subject to a (0.0, 1.0) gravity vector is
downwards at 1000 points per second².

@property (readwrite, nonatomic) CGVector gravityDirection;

@property (readwrite, nonatomic) CGFloat angle;
@property (readwrite, nonatomic) CGFloat magnitude;
- (void)setAngle:(CGFloat)angle magnitude:(CGFloat)magnitude;
@end


STEP THREE:
ADD BEHAVIORS- GRAVITY
- (void)viewDidLoad
{
...
UIGravityBehavior* gravityBehavior = [[UIGravityBehavior alloc]
initWithItems:@[self.button]];
[self.animator addBehavior:gravityBehavior];
...
}


GO
https://bitbucket.org/craigvz/dynamicssampler


WHAT HAPPENED?


•We

fell through the ﬂoor

•Button

needs to collide with the edge of
our view to stay on the screen


STEP FOUR:
ADD BEHAVIORS- COLLISION
NS_CLASS_AVAILABLE_IOS(7_0) @interface UICollisionBehavior :
UIDynamicBehavior
- (instancetype)initWithItems:(NSArray *)items;
@property (nonatomic, readwrite) UICollisionBehaviorMode collisionMode;
@property (nonatomic, readwrite) BOOL
translatesReferenceBoundsIntoBoundary;
- (void)setTranslatesReferenceBoundsIntoBoundaryWithInsets:
(UIEdgeInsets)insets;
...
@end


STEP FOUR:
ADD BEHAVIORS- COLLISION
- (void)viewDidLoad
{
...
UICollisionBehavior* collisionBehavior = [[UICollisionBehavior
alloc] initWithItems:@[self.button]];
collisionBehavior.collisionMode =
UICollisionBehaviorModeBoundaries;
collisionBehavior.translatesReferenceBoundsIntoBoundary = YES;
[self.animator addBehavior:collisionBehavior];
...
}


STEP FIVE:
ADD BEHAVIORS- PUSH
NS_CLASS_AVAILABLE_IOS(7_0) @interface UIPushBehavior : UIDynamicBehavior
- (instancetype)initWithItems:(NSArray *)items mode:(UIPushBehaviorMode)mode;
- (UIOffset)targetOffsetFromCenterForItem:(id UIDynamicItem)item;
- (void)setTargetOffsetFromCenter:(UIOffset)o forItem:(id UIDynamicItem)item;
@property (nonatomic, readonly) UIPushBehaviorMode mode;
@property (nonatomic, readwrite) BOOL active;
@property (readwrite, nonatomic) CGFloat angle;
// A continuous force vector with a magnitude of 1.0, applied to a 100 point x 100 point
view whose density value is 1.0, results in view acceleration of 100 points per s^2
@property (readwrite, nonatomic) CGFloat magnitude;
@property (readwrite, nonatomic) CGVector pushDirection;
- (void)setAngle:(CGFloat)angle magnitude:(CGFloat)magnitude;
@end


STEP FIVE:
ADD BEHAVIORS- PUSH
- (void)viewDidLoad
{
...
self.pushBehavior = [[UIPushBehavior alloc]
initWithItems:@[self.button]
mode:UIPushBehaviorModeInstantaneous];
CGFloat magnitude = 20.0;
[self.pushBehavior setAngle:-M_PI_2 magnitude:magnitude];
self.pushBehavior.active = NO;
[self.animator addBehavior:self.pushBehavior];
}

...


STEP SIX:
TWEAK ITEM PROPERTIES
NS_CLASS_AVAILABLE_IOS(7_0) @interface UIDynamicItemBehavior : UIDynamicBehavior
...
@property (readwrite, nonatomic) CGFloat elasticity; // Usually between 0
(inelastic) and 1 (collide elastically)
@property (readwrite, nonatomic) CGFloat friction; // 0 being no friction between
objects slide along each other
@property (readwrite, nonatomic) CGFloat density; // 1 by default
@property (readwrite, nonatomic) CGFloat resistance; // 0: no velocity damping
@property (readwrite, nonatomic) CGFloat angularResistance; // 0: no angular
velocity damping
@property (readwrite, nonatomic) BOOL allowsRotation; // force an item to never
rotate
...
@end


STEP SIX:
NS_CLASS_AVAILABLE_IOS(7_0) @interface UIDynamicItemBehavior : UIDynamicBehavior
...
// The linear velocity, expressed in points per second, that you want to add to
the specified dynamic item
// If called before being associated to an animator, the behavior will accumulate
values until being associated to an animator
- (void)addLinearVelocity:(CGPoint)velocity forItem:(id UIDynamicItem)item;
- (CGPoint)linearVelocityForItem:(id UIDynamicItem)item;
// The angular velocity, expressed in radians per second, that you want to add to
the specified dynamic item
// If called before being associated to an animator, the behavior will accumulate
values until being associated to an animator
- (void)addAngularVelocity:(CGFloat)velocity forItem:(id UIDynamicItem)item;
- (CGFloat)angularVelocityForItem:(id UIDynamicItem)item;
@end


STEP SIX:
- (void)viewDidLoad
{
...
UIDynamicItemBehavior* dynamicItemBehavior =
[[UIDynamicItemBehavior alloc] initWithItems:@[self.button]];
dynamicItemBehavior.elasticity = 0.5;
dynamicItemBehavior.resistance = 1.0;
...
}


UNITS


UNITS
• Many

properties have their own unit of measure

• UIGravityBehavior’s
• 1.0

= 1000 points / second2

• UIPushBehavior
• 1.0

magnitude:

magnitude:

= 100 points / second2 for 100 point x 100 point item
with density = 1.0 (UIKit Newton)


UIKit Dynamics

Recommended

Recommended

More Related Content

Recently uploaded

Recently uploaded (20)

Featured

Featured (20)

UIKit Dynamics