We’re all used to the default transitions between view controllers that we get for free. But sometimes we just want to keep the users’ attention to certain elements. Custom transitions are a great way of controlling user focus. In this article we are going to implement come custom transitions using segues. Let’s get started
The App
The code will be pretty simple but we’ll need to setup our demo interface. We’ll have a simple app that will display a small image with a title and description. When we tap on the image it will expand into a full screen image with a title below it. We’ll need our two view controllers. The initial view controller will look something like this:
Nothing fancy, right π And the second view controller will look something like this:
Add a tap gesture recognizer to the image view on the first view controller and control+drag it from the document outline to the details view controller, select ‘Present Modally’ from the action segue section:
Now add another tap gesture recognizer to the image view on the details view controller. And leave it for now, we’ll come back to it in a bit.
Go to the source file for your details view controller and create/connect the outlets for the image view and the label. Now we just need to add a few properties. This is the whole class:
Nothing unusual there, right π Let’s finish setting up the initial view controller. In the source file create/connect the outlets for the image view and the image title label. We won’t need the image description label in our example. Next, we’ll add two functions :
In the prepare for segue function, we’re setting the image and the title properties on the details view controller. If you’re using multiple segues in your view controller, you might want to check for the proper identifier. We’ll keep things simple in this example.
The last function will be used to dismiss the details view controller. In the storyboard control+drag the tap gesture recognizer in the details view controller to the ‘Exit’ object in the same view controller. A menu will pop up where you can select the function that we just created. This will unwind the segue to the view controller that’s implementing this function.
You can run the app now to make sure you can show and dismiss the details view controller. And now we’re ready to create our custom transition.
Custom Transition
The main thing that we’ll need is the animator. This is just a class that conforms to the ‘UIViewControllerAnimatedTransitioning’ protocol. We could have our view controller conform to this protocol, but for the sake of readability we’ll put it in a separate class. The class is quite small:
Transition duration is self-explanatory π Our transition animation will happen in the ‘animateTransition’ function.
The transition context parameter will contain the source and destination views and view controllers involved in the transition. It will also contain the container view which will act as a superview of the views involved in the transition. Source view will be setup for us automatically, so we need to set the destination view. We add it to the container view and set the initial frame. You can see that we’re also animating the alpha of the title label.
All that’s left to do is to call the UIView’s animate function where we animate the label’s alpha and the destination frame. It’s important to call the ‘completeTransition’ function on the context in the completion block of the animation.
That was pretty simple, right π Now we have two options. We can use this animator directly from our view controller by conforming to the ‘UIViewControllerTransitioningDelegate’ or we can use a segue. Let’s use a segue here, just for fun π
Our custom segue will be super simple:
We set ourselves as the transitioning delegate of the destination view controller and implement the delegate function. In the delegate function, we return the instance of our animator. And that’s it…
Remember how we set our tap gesture recognizer and the segue for displaying the details view controller. Go back to the main storyboard and select that segue. You have to select the class of the segue to be our custom segue:
And, with that, we have our custom transition. Build and run, it should look something like this:
The animation duration in the example above is set to 2 seconds, so you can better see what’s going on.
With just a few lines of code we got ourselves a custom transition. This is just a simple transition, but you can easily expand on this example and create some really complicated transitions.
Conclusion
Creating custom transitions is pretty simple and it’s a great way to grab your users’ attention. As an added bonus, you app will look very smooth and polished. Your users will certainly appreciate that. In this short article we’ve seen how to implement a simple custom transition. You can use what you’ve learned here as a basis for some more advanced transitions if you’re feeling creative π
I hope that this article helped you at least a bit and that you’ve learned something new today. You can find all the code and the snippets in the GitLab repo and, as always…
Have a nice day π
~D;
Hi Dejan, great tutorial. I have a question. How do I set fromVC.imageView.frame in ShowDetailsAnimator when my first screen is using a collectionView and the image inside the prototype cell. is in a different file. The cell class is separated from the ViewController.
Thank you.
Hi, Thanks π
The simplest way I can think of would be by using tags on your cell. You could have a function on your VC that would return the cell, but the tag would be simpler.
Thank you Dejan, I will see how I can do that. Another question, I tried downloading your git and worked on it but when I add a nav controller, the animation doesn’t work anymore. Why is that? How can i make it work if I have a nav controller? Thanks.