Learn About Custom View Transitions and Animations for iOS

0
1708
Custom-View-Transitions-and-Animations-740X296

Custom-View-Transitions-and-Animations-740X296

UIKit is definitely a powerful platform and offers various ways in order to transition in between view controllers. A few of the animations supplied by UIKit consist of horizontal sliding (by using a push segue), vertical sliding, cross fade, as well as page curl. Nevertheless, you must have a custom transition in between view controllers to make a persuasive design or even deliver a distinctive user experience. An illustration of this custom transitions is actually Apple’s Photos for iOS when picking out a photo.
In this guide, I demonstrate how to create your own custom transition by using several UIKit APIs. Technically, we can easily customize the transition between two views in custom containment and if you are using the latest iOS 7 API it is not supported out of the box.

Requirements:
As the APIs utilized to create custom transitions have been released in iOS 7, this particular tutorial makes use of Auto Layout as well as Swift 2, meaning that you need to be operating Xcode 7+ on OS X Yosemite or later on. You need to obtain the starter project via GitHub.

1. Aspects of a Custom Transition:
Whenever implementing a custom view controller transition, you will find two main components you have to be aware of:
• animation controller, also called the animator
• transitioning delegate, a view controller, which you assign
The animator object is accountable to the transition when it comes to both the period and the actual logic associated with animating the views. The animation controller within your app could be any type of object provided that it conforms towards the UIViewControllerAnimatedTransitioning protocol.
The transitioning delegate is liable for offering the animation controller specifically for your custom transition. The delegate object you specify should comply with the UIViewControllerTransitioningDelegateprotocol.

Aspects of a Custom Transition

2. Making a Custom Transition:
Open up the starter project and also run your current app. Whenever you tap the Press to View button, the conventional vertical modal transition happens to be being used.
Create a new file by choosing New> File… from your File menu. From the options which are shown, chooseiOS > Source > Swift File and also name the file CustomTransition. This document is going to contain the logic necessary for the custom transition.

We determine a TransitionType enumeration, which is often used when building an Animation

3. Controller object:
Next, we determine the AnimationController class with a few attributes. The duration property will probably be used to figure out the animation duration and it is the value returned within the UIViewControllerAnimatedTransitioning protocol method transitionDuration(_:). This duration does not have to be considered a variable, however it is easier to improve when only set once when making the animation controller. Both is Presenting as well as originFrame components to be used to create the actual animation from the transition.
Today we will implement the custom animation. Include the following method to the actual AnimationController class:
We begin this method by locating the container view through the provided transition context utilizing the containerView() method. We easy access the from and also to views by invoking the actual viewControllerForKey(_:)method, moving in UITransitionContextFromViewControllerKeyand UITransitionContextToViewControllerKey correspondingly.
In iOS 8 and later, you will get immediate access to the views making use of the viewForKey(_:) method and also the UITransitionContextFromViewKey and UITransitionContextToViewKey keys.
In the method body, we animate the actual detail view to be able to either grow or even shrink, making use of current UIView animation APIs.
The last point to note is the completeTransition(_:) method called in the transition context object. This process must be called once your current animation has completed to let the machine understand that your view controllers have completed transitioning. This technique allows a Boolean as its single parameter, signifies whether the transition was accomplished or not.
With this particular implementation, we now have developed a fully functional animation controller. To completely implement this, we now need to create a transitioning delegate.

We can easily pass view transitions with the help of these two methods in controller.

2

and then adding it to the animation Controller.

3

Learn-To-Build-Your-First-Professional-iOS-App

3. Determining a Transitioning Delegate:
As said before, the job of the transitioning delegate is usually to supply the animation controller object for any transition in between two view controllers. The transitioning delegate could be whatever object you want, however the common practice is always to make the presenting view controller the delegate.
In CustomTransition.swift, include the following code under the AnimationController class description:
By applying this extension, we face the ViewController class comply with theUIViewControllerTransitioningDelegateprotocol as well as implement three techniques. The first, prepareForSegue(_:sender:), can be used to designate the present ViewController instance because the destination DetailViewController object’s transitioningDelegate.

4
Congratulations. You have now with success created your initial custom view controller transition on iOS.

4. Creating a Transition Interactive:
To be able to communicate very easily between your view controllers (the actual transitioning delegate and also the view controller figuring out the percentage completion of the transition), open DetailViewController.swift by adding the below property to the DetailViewController class:
1 var rootViewController: ViewController!
Subsequent, include the following code to the didPanDown(_:) method of the DetailViewController class:
Next, return to CustomTransition.swift and replace the prepareForSegue(_:sender:) method within the ViewController class extension using the following:
In prepareForSegue(_:sender:), we provide the detail view controller having access to the root view controller.
Ultimately, include the following method to the ViewController extension:
The interactionControllerForDismissal(_:) method returns the root view controller’s interactionController. When it is nil (for instance, if the button is tapped), the custom animation to be used instead.
Since you would expect, an interactive controller may also be used when showcasing view controllers by applying the interactionControllerForPresentation(_:) method.
Create and run your app last time and, right after presenting your own detail view controller, drag down on the display screen and you may see the transition transfer to sync with the placement of your finger.

Conclusion:
You need now be comfortable making fully interactive, custom view controller transitions on iOS. Basically, these types of APIs are merely held back by the animation features of UIKit as well as Core Animation. They may be utilized for nearly every kind of transition.

LEAVE A REPLY

Please enter your comment!
Please enter your name here