Cool Custom ViewController Transitions — Advanced

Add custom transitions from one view controller to another.

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.

This post’s a little bit more advanced than the previous one.

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

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

ImageViews

  1. Plus Image View
  2. Profile Image View (the avatar image)
  3. Background
  4. Like
  5. Play
  6. Cancel

Views

  1. Background

Labels

  1. Title
  2. Album
  3. Year

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

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:

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