Fran Obarrio
Sep 3 · 5 min read

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:

Final Project

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.

  • PushAnimator:

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:

  1. Image View (it’s the bottle)
  2. Background View (it’s the background color)
  3. 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

Conclusion

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 👏👏👏👏👏👏

You can connect with me on LinkedIn or you can reach me on Twitter @fran_obarrio or better you can reach me as we did several years ago by email: fobarrio at Gmail dot com

If you have any comment, question, or recommendation, feel free to post them in the comment section below!

Github Source Code:

By the way! Here it’s the second post with a more advanced animation :)

Flawless iOS

🍏 Community around iOS development, mobile design, and marketing

Fran Obarrio

Written by

iOS Developer

Flawless iOS

🍏 Community around iOS development, mobile design, and marketing

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade