Fun with UIKit Dynamics

Episode Links

Source Code
Omar Fouad - Getting Started with UIKit Dynamics - An excellent blog post complete with animated gifs of a progressive UIKit Dynamics example. Worth the read.

Setting up the "World"

First we need an animator and an initial gravity behavior:

@interface ViewController ()
@property (nonatomic, strong) UIView *square;
@property (nonatomic, strong) UIDynamicAnimator *animator;
@property (nonatomic, strong) UIGravityBehavior *gravity;
@end

We initialize these in viewDidLoad:

    UIView *square = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 40, 40)];
    square.backgroundColor = [UIColor colorWithRed:0.311 green:0.101 blue:0.311 alpha:1.000];
    square.center = self.view.center;
    square.layer.shadowColor = [UIColor blackColor].CGColor;
    square.layer.shadowOffset = CGSizeMake(1, 1);
    square.layer.shadowOpacity = 0.5;
    square.transform = CGAffineTransformMakeRotation(M_PI  / 4.1);
    self.square = square;
    [self.view addSubview:square];

    self.animator = [[UIDynamicAnimator alloc] initWithReferenceView:self.view];

    self.gravity = [[UIGravityBehavior alloc] initWithItems:@[ square ]];

    [self.animator addBehavior:self.gravity];

Running this we see the square view just falls off the screen. To get our view bounds to act as a platform we need a collision behavior.

Adding in a Collision Behavior

We start off adding a property to hold the behavior. This isn't strictly required, but we might want to tweak it or toggle it later, so it helps to have a reference available to the entire class:

@property (nonatomic, strong) UICollisionBehavior *collision;

Then we initialize it:

    self.collision = [[UICollisionBehavior alloc] initWithItems:@[square]];
    self.collision.translatesReferenceBoundsIntoBoundary = YES;    

    // ...

    [self.animator addBehavior:self.collision];

The items control which subviews interact with each other. To get it to interact with the containing view, you need to set translatesReferenceBoundsIntoBoundary to YES.

Adding a Rigid Barrier

    UIView *barrier = [[UIView alloc] initWithFrame:CGRectMake(0, 200, 130, 10)];
    barrier.backgroundColor = [UIColor redColor];
    [self.view addSubview:barrier];

We could add this to the collision behavior, but a collision would cause the barrier to move as well. Instead we add it as a boundary:

    [self.collision addBoundaryWithIdentifier:@"barrier"
                                      forPath:[UIBezierPath bezierPathWithRect:barrier.frame]];

Setting Friction, Elasticity, or Angular Resistance

We can control the physical reaction properties of a given dynamic item by giving it a dynamic item behavior:

    UIDynamicItemBehavior *behavior = [[UIDynamicItemBehavior alloc] initWithItems:@[square]];
    behavior.elasticity = 0.5;
    behavior.friction = 0.2;
    behavior.angularResistance = 0.5;

    // ...

    [self.animator addBehavior:behavior];

Providing Impulse Forces

We can add a bit of interactivity by adding an impulse force on our view when the user taps:

    [self bump];

    UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(bump)];
    [self.view addGestureRecognizer:tap];

The bump method simply adds a dynamic behavior that has a linear velocity added to it:

- (void)bump {
    UIDynamicItemBehavior *bump = [[UIDynamicItemBehavior alloc] initWithItems:@[self.square]];
    [bump addLinearVelocity:CGPointMake(600, -1200) forItem:self.square];
    [self.animator addBehavior:bump];
}