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.
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 show the collection view and do the push to Pushed View Controller
- MainViewController+DataSource.swift: CollectionView DataSource methods
- MainViewController+ProtocolTransitions.swift: Here you’ll find the protocol with each object we’ll animate! CellImageView, backgroundColor View & Cell Background View
- 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
- CardCell.swift This is the UICollectionViewCell that we are going to use on this project on Main VC CollectionView
- 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: 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:
1. Normal State
2. CollectionView Background Cell Shrink
3. CollectionView Background expands to the width of the container and removes rounded borders
4. CollectionView Background expands to fit the bottom and top of the Final VC background and animates the bottle to the top
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()a 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
So.. how can we animate the objects from one view controller to another.
We’ll need to create each view, add them to the container view and make them animate.
Let’s get into the code:
At this point we got:
- Image View (it’s the bottle)
- Background View (it’s the background color)
- CellBackground View (it’s the card view of the collection view that will be morphed to the big background in the pushed VC)
Now let’s look into the animations:
Here is a brief explanation of the animations:
Animator 1. We do a transform into 0.9 of the cellBackground view
Animator 2: We expand to the width of the main view
Animator 3. Cell background expands to full width and height based on toVC (PushedViewController) cellbackground plus we add the animation for the bottle
Pop animator it’s the same but in reverse order. Let’s see the code:
So.. the only final thing in here is to do the animation of the background color when the CollectionView does the scroll for the cell.
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 collection cell has been tapped we’ll add this transition coordinator into the navigation controller delegate
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 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:
Cool View Controller Transitions - Easy. Contribute to franobarrio/animation-transition-viewcontroller-easy…
By the way! Here it’s the second post with a more advanced animation :)