Why I’ve created this post? It took me a while to understand how the transitions between ViewControllers works. Sadly there isn’t a huge amount of tutorials online explaining in a simple way how the VCs (ViewControllers) animation transition works.
So I’ve decided to create a couple of posts explaining the simplest way how you can create stunning transitions.
This post’s a little bit more advanced than the previous one.
Let’s create custom UINavigationController Animated Transitions!
Here is the final project:
Take a moment to familiarize you with the project and the following elements:
- MainViewController.swift: the main View Controller. Here you’ll find some methods for fadeIn/fadeOut cells
- MainViewController+DataSource.swift: TableView DataSource methods
- MainViewController+ProtocolTransitions.swift: Here you’ll find the protocol with each object we’ll animate!
- PushedViewController.swift: Second View Controller in the project. This VC it’s the final state of the animation
- AnimationCollectionViewLayout.swift CollectionView Layout to be used in Main VC collectionView
- MainTableViewCell.swift This is the main tableView Cell that we are going to use on this project on Main VC
- Helpers.swift Here we define the protocol to use on Main VC and PushedVC to get the reference of the objects to animate
- PushAnimator.swift: This class will inherit from NSObject and will implement the UIViewControllerAnimatedTransitioning protocol for the transition between Main VC and Pushed VC.
- PopAnimator.swift: This class will inherit from NSObject and will implement the UIViewControllerAnimatedTransitioning protocol for the transition between Pushed VC and Main VC
- TransitionCoordinator.swift: This class will inherit from NSObject and will implement the UINavigationControllerDelegate protocol.
In this class we define that on push we use PushAnimator transition and when there is a pop we use PopAnimator transition
Side Note #1: Push and Pop Animator has a doBezierAnimation method. You can set true or false to see the path of the Avatar and Plus ImageView QuadCurve Animation
Side Note #2: The UINavigationControllerDelegate protocol defines methods a navigation controller delegate can implement to change the behavior when view controllers are pushed and popped from the stack of a navigation controller.
Let’s see the steps that the animation should take: (we are going to show)
1. Normal State
2. Fade Out Cells + TableView Cell Shrink
3. Avatar and Plus ImageView animates using a QuadCurve Animation. Other items do a linear animation.
4. Final Animation: Background expands to the width of the container and half of the height screen at the same time that the Avatar and Plus Image with the labels too
Let’s move into the Animation Controller!
We are going to do have 2 custom transition animations in this case.
1 for push and 1 for pop. Let’s focus right now on doing the push animation first. So what we’ll need?
An Animation Controller
This controller needs to conform
UIViewControllerAnimatedTransitioning()protocol using two methods.
transitionDuration(using transitionContext: UIViewControllerContextTransitioning?) -> TimeInterval
animateTransition(using transitionContext: UIViewControllerContextTransitioning)
transitionDuration | It’s the duration of the total animation
animateTransition(using:) | It’s where the animation logic is
Let’s get started with the first animator.
During the transition, we’ll need to give a container view in which the animation transition takes place.
- The transitionContext view needs to be added to the controller’s view.
We’ll have a protocol that will help us to get references for the items that we’ll animate. This protocol will be available for the main VC and the Pushed VC
SideNote: We need to have all this references on the main VC and Pushed VC
So.. how can we animate the objects from one view controller to another.
We’ll need to create each view/object, add them to the container view and make them animate.
Let’s get into the code:
At this point we have
- Plus Image View
- Profile Image View (the avatar image)
Here it’s the full animation for the PushAnimator (will explain later)
Here is a brief explanation of the animations:
Animator 1. Makes the animation of the cell shrink with titles
Animator 2: We animate to the top & cell expands to the width of the main view and animate the labels + Cancel, Like & Play imageviews
doBezierAnimation. Bezier & QuadCurves Animation for the Avatar & Plus ImageView
Pop animator it’s the same but in reverse order. We only change the Quad Curve to make it smoother. We won’t cover this code since it’s almost the same.
At this point we have everything but we need to add the transition coordinator between the 2 VC (View Controllers)
On MainViewController we’ll add:
let transition = TransitionCoordinator()
When a Cell has been tapped we’ll add this transition coordinator into the navigation controller delegate, Do the animation Fade Out and Push the ViewController to PushedViewController.
Let’s see the code for the transition coordinator:
This class sets the navigation controller delegate and check what type of operation are we doing:
if we are doing a push it returns an instance of PushAnimator() transition and if it’s a pop it returns an instance of PopAnimator() transition
Seems a little hard at first but trust me it’s easy ! Hope you have enjoyed this post!
If you enjoyed reading this post, please share and give some claps so others can find it 👏👏👏👏👏👏
If you have any comment, question, or recommendation, feel free to post them in the comment section below!
Github Source Code: