How to present view controller modally with custom transitioning animation

Remark

There is a better version of this article. Please welcome.

Hi for all! Other day, we’re (team of programmers) were tasked to make full redesign of our application with a lot of nice and neat animations. Naturally was supposed that user must see sweet custom transition animations while using the application. This article shortly describes main steps for creating custom transition animation for modally presented view controller.

Creating the project

Personally, I prefer to create projects programmatically, without using storyboard. There are many good articles about creating of project without storyboard. Some of them:

Ok, we created the project, let’s talk about project structure. All we’re need is two view controllers (main view controller and secondary, which will be presented) and transitioning delegate, which we talk about later.

Project structure

Main view has white background and only one button for presenting secondary view, whereas secondary view has black background, orange subview called “vContent” and also only one button for dismissing themselves.

Transitioning delegate

Whenever user touches “Present modally” button main view controller creates secondary view controller and sets the transitioning delegate for him. The most important point is that you need to specify modalPresentationStyle as .custom otherwise transitioning animation will involve system present animation.

Within TransitionDelegate class is necessary to declare two methods: one for presenting view controller, one for dismissing. It’s nice solution to encapsulate all logic for presenting and dismissing animations inside single classes, such as PresentAnimator and DismissAnimator:

Notice that TransitionDelegate is subclass of NSObject and adopts UIVIewTransitioningDelegate.

For presenting animation we’ll use PresentTransitioningDriver class which holds all logic for animation. But first we need to declare four methods within PresentAnimator class and one property which stored the PresentTransitioningDriver instance. For convenience animation duration taken out to Constants enumeration.

Notice that PresentAnimator is subclass of NSObject and adopts UIVIewControllerAnimatedTransitioning.

As you can see as argument PresentAnimator initializer takes transitionContext. This is all we need for creating cool animation, really! Transition context contains view controller from which the transition was made, view controller to which the transition will be made and container for presentation. Hence we can get access to main view and secondary view through transitionContext. It remains to create UIViewPropertyAnimator and animate whatever we want. As an example I animated constraints and corners of secondary view’s vContent to create a nice bottom-stretch effect to the middle of the screen.

This is all you need for transitioning animation, but very important part of this logic is that being presented view must be subView of transitionContext container! Do not forget to specify constraints. Concerning DismissAnimator, then everything is the same. As an example I first slide down secondary view’s vContent then just change the opacity of views.

Notice that DismissAnimator is subclass of NSObject and adopts UIVIewControllerAnimatedTransitioning.

At the end of this article I would like to mention one feature, that I couldn’t solve. For some reason before dismissing secondary view controller is necessary to set transitioningDelegate again. Perhaps this is because usually delegate is weak var property. Unfortunately today I don’t know.

Post scriptum

I shared the project and you can find some good solutions in it, such as animation of status bar color or programmatically created button’s smooth highlighting animation.

So I wish you a wonderful mood and good day. That’s it.

--

--

--

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

GSoC’ 20: Swift Image Loader for Swift for Tensorflow

Demystifying Struct, Class and Enum in Swift 5

SWIFTLY with SAAGAR

WPF Data Binding Best Practices

Continuous Integration — GitLab — iOS — Part 2

How to add basic drawer menu with Swift 5

Asynchronously Loading Images into Table and Collection Views

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Ace Rodstin

Ace Rodstin

More from Medium

Swift — Cocoapods Usage

Introduction To SwiftUI — IOS development

Every iOS developer should know these Xcode tricks

Test Doubles by example in Swift