In this tutorial, I would like to show you how you can use Custom Transitions to implement beautiful animated navigations in iOS. The gif below will explain what we plan to achieve. So we are going to begin with a Starter project which you can download here. This consists of two View Controllers. The first one is the Timeline View and the other is a Navigation View. This simulates the scenario of having to open up a Menu/Navigation from a View with your data. This designs are taken from our Mega App Design Kit. If you like how these screens look, you should click here to check it out. There are loads more screens included in the Kit.

Create A Transition between two View Controllers

Open up the project and navigate to the Storyboard. You will see two View Controllers. WE want to create the transition between both. Ctrl+Drag from the TimelineViewController to the NavigationViewController to create a segue. Choose the “Custom” option. This creates a segue we can now call in code to perform the transition. Click on the actual segue in the storyboard to bring up the attributes of the segue. In the identifier box, type in “presentNav” So, let’s make this call. Open up the TimelineViewController.swift file, and add the following method.

1
2
3

@IBAction func presentNavigation(sender: AnyObject?){
performSegueWithIdentifier("presentNav", sender: self)
}

This gives us an entry to call the segue. We will customize it in a minute. Now, we would like to hook up the menu button in the navigation bar so calls this method when tapped. Right-Click on the TimelineViewController in the storyboard and Ctrl-Drag from the menu button item to the presentNavigaton method, choose Touch-up inside as the interaction method. Now you should be able to run the app. If you do exactly that, then tap on the menu button, you will see the Navigation View popping up in a normal modal transition. What we want to achieve is a much more interesting transition. So let’s get to that.

Creating A Better Transition

Add a new file to the project. Call it TransitionOperator and add the following piece of code which I will explain in a little bit.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

import Foundation
import UIKit
 
class TransitionOperator: NSObject, UIViewControllerAnimatedTransitioning, UIViewControllerTransitioningDelegate{
 
var snapshot : UIView!
 
func transitionDuration(transitionContext: UIViewControllerContextTransitioning) -> NSTimeInterval {
return 0.5
}
 
func animateTransition(transitionContext: UIViewControllerContextTransitioning) {
 
}
 
func animationControllerForPresentedController(presented: UIViewController, presentingController presenting: UIViewController, sourceController source: UIViewController) -> UIViewControllerAnimatedTransitioning? {
 
return self
}
 
func animationControllerForDismissedController(dismissed: UIViewController) -> UIViewControllerAnimatedTransitioning? {
 
return self
}
}

This is the class that will manage the animation going on during the transition. The class derives from UIViewControllerAnimatedTransitioning and UIViewControllerTransitioningDelegate to handle the methods necessary. The transition duration is set to 0.5 which is the duration in secs for how long the transition will take to complete. In this case, half a second. The two methods animationControllerForPresentedController and animationControllerForDismissedController specifies our new TransitionOperator class and the controller responsible for the animations. The snapshot view will be needed to show a snapshot of current view controller during the animation. Now it’s time to work on the animateTransition method, this is where all the magic happens, Add the following bit of code to replace the animateTransition method.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

func animateTransition(transitionContext: UIViewControllerContextTransitioning) {
let container = transitionContext.containerView()
let fromViewController = transitionContext.viewControllerForKey(UITransitionContextFromViewControllerKey)
let fromView = fromViewController!.view
let toViewController = transitionContext.viewControllerForKey(UITransitionContextToViewControllerKey)
let toView = toViewController!.view
 
let size = toView.frame.size
var offSetTransform = CGAffineTransformMakeTranslation(size.width - 120, 0)
offSetTransform = CGAffineTransformScale(offSetTransform, 0.6, 0.6)
 
snapshot = fromView.snapshotViewAfterScreenUpdates(true)
 
container.addSubview(toView)
container.addSubview(snapshot)
 
let duration = self.transitionDuration(transitionContext)
 
UIView.animateWithDuration(duration, delay: 0.0, usingSpringWithDamping: 0.5, initialSpringVelocity: 0.8, options: nil, animations: {
 
self.snapshot.transform = offSetTransform
 
}, completion: { finished in
 
transitionContext.completeTransition(true)
})
 
}

This bit of code does the following, 1) Get the views from the context. These will be the TimeLineViewController and the NavigationViewController. 2) Create a transform object by translating and reverse-scaling the item to the pushed. 3) Create a snapshot of the current Timeline View, to display in the context container. 4) Add the snapshot and the NavigationViewController’s view (toView) to the container context and then perform the animations. Time to hook up this class into our transition. Go back to TimelineViewController and add a variable to the top of the class and initialize it.

1

var transitionOperator = TransitionOperator()

Then add the prepareforsegue method below to the same file

1
2
3
4
5
6

override func prepareForSegue(segue: UIStoryboardSegue, sender: AnyObject?) {
 
let toViewController = segue.destinationViewController as UIViewController
self.modalPresentationStyle = UIModalPresentationStyle.Custom
toViewController.transitioningDelegate = self.transitionOperator
}

This makes sure we use the transition operator as our new Transitioning Delegate. Now if you run the app in the simulator, tap on the menu icon, you will get a nice retreating animation to show the Navigation. Creating the Reverse Animation Tapping on any item in the table will bring back the TimelineViewController but the animation is not correct. Let’s do some refactoring before we move on. Add a new instance variable in the TransitionOperator class.

1
2
3
4
5
6

class TransitionOperator: NSObject, UIViewControllerAnimatedTransitioning, UIViewControllerTransitioningDelegate{
 
var snapshot : UIView!
var isPresenting : Bool = true
 
.....

Then change the name of the animateTransition method presentNavigation and now we will have a new animateTransition method that calls it.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

func animateTransition(transitionContext: UIViewControllerContextTransitioning) {
if isPresenting{
presentNavigation(transitionContext)
}
}
 
//This is the old animate transition method
func presentNavigation(transitionContext: UIViewControllerContextTransitioning) {
let container = transitionContext.containerView()
let fromViewController = transitionContext.viewControllerForKey(UITransitionContextFromViewControllerKey)
let fromView = fromViewController!.view
let toViewController = transitionContext.viewControllerForKey(UITransitionContextToViewControllerKey)
let toView = toViewController!.view
 
....
}

As you can see, we are calling the presentNavigation method (formerly called animateTransition) when we are presenting the new view. And when we dismiss the view, we want to create a new method to call. Let’s name it dismissNavigation, see it below.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

func dismissNavigation(transitionContext: UIViewControllerContextTransitioning) {
 
let container = transitionContext.containerView()
let fromViewController = transitionContext.viewControllerForKey(UITransitionContextFromViewControllerKey)
let fromView = fromViewController!.view
let toViewController = transitionContext.viewControllerForKey(UITransitionContextToViewControllerKey)
let toView = toViewController!.view
 
let duration = self.transitionDuration(transitionContext)
 
UIView.animateWithDuration(duration, delay: 0.0, usingSpringWithDamping: 0.8, initialSpringVelocity: 0.8, options: nil, animations: {
 
self.snapshot.transform = CGAffineTransformIdentity
 
}, completion: { finished in
transitionContext.completeTransition(true)
self.snapshot.removeFromSuperview()
})
}

It is very similar to the presentNavigation method, this time we are animating the snapshot (which if you remember was made from the TimelineViewController) back to the main screen where it was. We now call this new method in our animateTransition method when we are dismissing the NavigationViewController.

1
2
3
4
5
6
7

func animateTransition(transitionContext: UIViewControllerContextTransitioning) {
if isPresenting{
presentNavigation(transitionContext)
}else{
dismissNavigation(transitionContext)
}
}

We are almost there… We just need to let the TransitionOperator know when we are in the presentation mode or in the dismissal mode. Our class conforms to the UIViewControllerTransitioningDelegate which provides these two methods.

1
2
3
4
5
6
7
8
9
10
11

func animationControllerForPresentedController(presented: UIViewController, presentingController presenting: UIViewController, sourceController source: UIViewController) -> UIViewControllerAnimatedTransitioning? {
 
self.isPresenting = true
return self
}
 
func animationControllerForDismissedController(dismissed: UIViewController) -> UIViewControllerAnimatedTransitioning? {
 
self.isPresenting = false
return self
}

This asks for the animationController in both scenarios. So when the transition delegate asks for the animationControllerForPresentedController, we set the isPresenting value to true and false when it gets asked for the animationControllerForDismissedController. Now you can run the project in the simulator/device. Tap on the menu button, and see the Navigation come into view. Tap on any item in the table, and see the TimelineController come back into view.

What’s Next?

UPDATE: In the comments, some people noted that it was an issue implementing the code to open multiple ViewControllers. I have updated that in the final Xcode project and you can download the final project here.

Also, don’t forget to check out the Mega - App Design Kit for more amazing designs like the ones you see here. A quick homework for you:-)… We are always going back to the same View Controller, extend the project to load a new View Controller depending on what item we tap on in the Navigation list. See the project above for the update