Animated view controllers transition with custom segues

In addition to view animations, which can be performed using different techniques and APIs (View animation using UIMotionEffect, UIKit Dynamics overview]), it is possible to create custom animations for the transitions between view controllers.

Navigating from one view controller to another is driven by animations since the oldest iOS versions. The default animations have become conventions very well known by the users: a view controller pushed on the navigation controller stack slides on the screen from right to left, a modal view controller is presented from bottom-up, going through the view controllers contained in a UIPageViewController is animated by sliding the currently displayed controller to the the left or to the right, depending on the browsing direction, etc.

The default animations can be replaced with custom ones using different UIKit APIs, depending on the type of animation to achieve. You can choose to implement the methods in the UIViewControllerAnimatedTransitioning or UIViewControllerInteractiveTransitioning, which I explained in the View controller transitions with UIKit Dynamics article, or to create custom segues by subclassing UIStoryboardSegue.

In this article I show how to animate the transition between two view controllers contained in a navigation stack using a custom segue. The initial collection view controller presents a grid of square thumbnail views. When a thumbnail is tapped, the detail view controller is presented; the view starts animating from the initial position and size, expands to make use of the full screen width and aligns with the horizontal center:

animated transition with custom segue

As a practical application, this type of animation could be used to present a photo in fullscreen after selecting its thumbnail in a list.

The Xcode project sample for this article is available for download on GitHub.

Implement the custom segue

The simple application used as example for this article consists of a custom UICollectionViewController with a standard flow layout, and a detail view controller which only contains the animated detail view. The two controllers are embedded in a navigation controller in the storyboard.

view controllers in storyboard

Notice that the segue between the collection view controller and the detail view controller is not created directly in the storyboard. While it’s possible to define the segue in the storyboard and assign it to the custom UIStoryboardSegue subclass, I instantiated it directly in code, when the collection view cell is selected:

The detail view frame is initialized with the frame of the thumbnail view so that the animation can start from the position and size of the thumbnail.

To override the default push animation of the navigation controller, I redefined the -perform method in the custom segue class to force the detail view controller to be presented without any animation:

Animate the detail view

The detail view is animated using Auto Layout constraints. To be sure that the detail view is initially presented at the size and position of the thumbnail, the animation to the its final state is triggered in the -viewDidAppear: method.

It wouldn’t make sense to use Auto Layout if the detail view didn’t keep its relative position and size when the device orientation changes, so I retained the size constraint as a property of the view controller and modified it depending on the main view’s width or height when its size changes:

Conclusion

If it weren’t for the navigation bar that changes when transitioning to the detail view controller, it is practically impossible to realize there are actually two different view controllers involved in this animation. But the transition from the detail view to the grid view by pressing the back button still uses the default pop animation. In the next article I will replace the default animation using an unwind segue.

 

Catalin Rosioru

 

One thought on “Animated view controllers transition with custom segues

Comments are closed.