[UIKit Dynamics Series] How to apply a force animation to your dynamic items with UIPushBehavior class

In the previous tutorial, you saw how to work with UISnapBehavior and UIDynamicItemBehavior to extend your app views with some custom animations.

In this tutorial, you will learn how to use another dynamic behavior from the UIKit Dynamics arsenal to bring additional animations to your app. The dynamic behavior you will work with here is provided by the UIPushBehavior class.

To start off, download the starter project here.

Open the project, select the Main.storyboard file then the Document Outline view to see all the views hierarchy of the interface, many of them are hidden behind each other explicitly, and you will reveal them at the right time with the UIKIt Dynamics animations.

Here is how the final animation will look like at the end of the tutorial:

Let’s start by declaring the UIDynamicAnimator reference which you will use along the way. Remember the animator object is the handler of all the behaviors you want to apply to your dynamic items.

UIDynamicAnimator serves as an intermediate between the physics engine itself and the dynamic item, via one or many behaviors that you attach to the animator.

Select ViewController.swift from the Project navigator view, and add the following property declaration just after the class name:

var animator: UIDynamicAnimator!

Next, locate the viewDidLoad method and place the following code inside (after the super.viewDidLoad() call):

// 1
self.imageView.bounds.origin = CGPointMake(0, -1000)
// 2
self.enterBtn.layer.cornerRadius = 5.0
self.loginBtn.layer.cornerRadius = 5.0
self.animator = UIDynamicAnimator(referenceView: view)
self.animator.removeAllBehaviors()
// 3
let snapBehavior = UISnapBehavior(item: self.imageView, snapToPoint: self.view.center)
self.animator.addBehavior(snapBehavior)
// 4
UIView.animateWithDuration(0.9) { () -> Void in
   self.enterBtn.alpha = 1.0
}

Let’s breakdown the code above, part by part:

// 1: When you run the project, the image you see at the screen need to have different coordinates than the default (0,0) coordinates set in storyboard. This is important for the snap behavior animation in order to bring effect to the image. So here you set the (x,y) coordinates to (0, -1000) to move the image off screen before an animation can be applied to it to bring it back at the center of the view.

// 2: Here you changed the buttons corners radius to look better than the default corners, you also initialised an animator object to which all behaviors will be attached to activate the animations of the views in the screen.

// 3: This code declare and initialise a snap behavior for the image view to apply an entry animation on it, and to make it move from the initial (0, -1000) corrdinates to the center of the screen smoothly. Then the behavior is added to the animator object in order to activate it.

// 4: Here you are showing the button with a fade in animation, this is not really a UIKit Dynamics animation, but still pretty to use 🙂

Run the project, and notice how the image view and the button are showing up to the screen with some cool animations.

Now let’s implement the action method that will be attached to the button, this method will move out the current screen image and button with a push animations, in order to reveal the login form behind it.

Select Main.storyboard from the Project navigator view, and switch to the Assistant editor. Make sure that the ViewController.swift file is loaded along with the storyboard.

Next, hold a ctrl click on the “Enter Btn” button from the Document Outline view, and drag a line from the button to the file code. Make sure the Connection type is an Action, and name it “logIn”.

Cool, now switch back to the Standard editor and select the ViewController.swift file to load it in the editor. Locate the logIn action method recently added and copy the following code inside:

 // 1
 self.animator.removeAllBehaviors()
 // 2
 let pushBehaviorForButton = UIPushBehavior(items: [self.enterBtn], mode: UIPushBehaviorMode.Instantaneous)
 pushBehaviorForButton.pushDirection = CGVectorMake(5, 0)
 let pushBehaviorForImage = UIPushBehavior(items: [self.imageView], mode: UIPushBehaviorMode.Instantaneous)
 pushBehaviorForImage.pushDirection = CGVectorMake(-200, 0)
 // 3
 self.animator.addBehavior(pushBehaviorForButton)
 self.animator.addBehavior(pushBehaviorForImage)

Let’s quickly explain what does the code above perform:

// 1: The animator object already have the snap behavior attached to it. Since the snap behavior animation is finished and we don’t need it anymore, it’s better to clear all behaviors already attached to the animator in order to add new behaviors to it.

// 2: Here you just set up two UIPushBehavior objects for the button and the image view. You also set the pushDirection property to specify a direction vector while the views are being moved out the screen. The CGVectorMake constructor will return a CGVector structure with an x and y components to accurately express the push direction.

// 3: as usual, each time you add a new behavior, you need to add it to the animator reference in order to be activated.

That’s it, run the project and select the “Enter” button to reveal the login form screen with the push animations 🙂

As usual, you can download the final project here.

Where To Go From Here:

UIKit Dynamics is not a replacement for Core Animation or UIView animations. Each one has its particular uses and can be combined together, as you did in this tutorial (you used both UIKit Dynamics animations with a UIView animation).

There is a lot to learn about UIKit Dynamics techniques, I would suggest to watch the great 2015 WWDC session entitled What’s New in UIKit Dynamics and Visual Effects.

I will be waiting for your comments, questions and suggestions below and in this forum thread 🙂