IOS custom transition animation

Introduction to the

Animation is essential in daily development, apple also provides many good animation effects for iOS development, as iOS developers naturally need to have some understanding of animation. In these animations, there is a kind of animation is used for the transition animation from one scene to another scene, we call it transition animation, the main content of this article is about transition animation.

Transitions, as the name implies, are scene transitions, that is, interface transitions from one scene to another. In iOS, it can be divided into two levels: view controller transformation and view transformation. The main structure of this paper is as follows:

  • Introduction to transition animation
  • Realization mechanism of View Controller transition — Five protocols
  • View transition implementation – CATransition

View Controller Transition — View Controller Transition

Prior to iOS 7, the system provided some default view controller transitions, but these animations were completely implemented by the system and could not be customized. In iOS 7, the system opened up some apis to make custom transitions a reality.

The apis related to custom transition animations mainly include five protocols, which are described below:

  • Transitions agent
  • Transition context protocol
  • Animation controller protocol
  • Interactive controller protocol
  • Transition coordinator protocol

1. Transfer agent

A view in a view controller can be displayed on the screen in two ways: (1) embedded in a container, such as UINavigationController, UITabBarController, or (2) modal pop-up, Present/ Dismiss

For these methods, the system provides relevant methods of transition animation in the corresponding agent protocol, which are analyzed one by one as follows:

1.1 navigation agent – UINavigationControllerDelegate

optional func navigationController(_ navigationController: UINavigationController.animationControllerFor operation: UINavigationController.Operation.from fromVC: UIViewController.to toVC: UIViewController) -> UIViewControllerAnimatedTransitioning?
Copy the code

This method returns a comply with optional object UIViewControllerAnimatedTransitioning agreement, this agreement is the animation controller, in the following pages, will be dedicated, here do a brief introduction first. We can design transition animations in classes that comply with this protocol, and if the object returned is nil, we keep the system animated and don’t use custom animations.

Operation is an enumeration with case.None,.push,.pop; FromVC represents the ViewController displayed during the push/pop action, i.e. the ViewController before the animation, and toVC represents the ViewController after the animation. For example, if the push action is A -> B, fromVC is A. ToVC is B, fromVC is B, toVC is A when pop action B -> A occurs.

optional func navigationController(_ navigationController: UINavigationController.interactionControllerFor animationController: UIViewControllerAnimatedTransitioning) -> UIViewControllerInteractiveTransitioning?
Copy the code

This method returns a comply with optional object UIViewControllerInteractiveTransitioning agreement, this agreement to object to an interactive transitions object, namely interactive control protocol object, the object defines the interaction of the animated transitions.

1.2 modal agent – UIViewControllerTransitioningDelegate

optional func animationController(forPresented presented: UIViewController.presenting: UIViewController.source: UIViewController) -> UIViewControllerAnimatedTransitioning?

optional func animationController(forDismissed dismissed: UIViewController) -> UIViewControllerAnimatedTransitioning?
Copy the code

These two methods are returns a comply with optional object UIViewControllerAnimatedTransitioning agreement, when used for modal pop-up, return a custom animation of the object. Unlike the navigation bar, the modal pop-up is split into present and dismiss methods.

In the present method, presented presents the ViewController presented, source presents the ViewController calling the method, presenting can be the same or different from the source, Presenting is the parent controller of the source when the source is a childViewController, otherwise presenting is the same as the source.

optional func interactionControllerForPresentation(using animator: UIViewControllerAnimatedTransitioning) -> UIViewControllerInteractiveTransitioning?

optional func interactionControllerForDismissal(using animator: UIViewControllerAnimatedTransitioning) -> UIViewControllerInteractiveTransitioning?

Copy the code

Like the method of setting the animation controller, when setting the interaction controller, the modal mode is also divided into present and dismiss methods, which are used to set the interaction behavior of present and dismiss respectively.

1.3 Tabbar’s transfer agent

optional func tabBarController(_ tabBarController: UITabBarController.animationControllerForTransitionFrom fromVC: UIViewController.to toVC: UIViewController) -> UIViewControllerAnimatedTransitioning?

optional func tabBarController(_ tabBarController: UITabBarController.interactionControllerFor animationController: UIViewControllerAnimatedTransitioning) -> UIViewControllerInteractiveTransitioning?
Copy the code

As described above, these two methods return an animation controller and an interactive controller, respectively.

2. Transition context

Transitions context is a keep UIViewControllerContextTransitioning protocol object, the object by the system automatically created and managed without us. UIViewControllerContextTransitioning agreement contains the following API:

@ the available (iOS 2.0. *)

var containerView: UIView { get }
Copy the code

So containerView is a container where the views before and after the transitions and the animation views that you want to add are added. In fact, the type of the container is UIViewControllerWrapperView, whether it is a custom transitions, or the system definition transitions, finally is added on the view, and as a global context, the view is only a, so you need to rationally manage its view.

@ the available (iOS 2.0. *)

func viewController(forKey key: UITransitionContextViewControllerKey) -> UIViewController?
Copy the code

According to the from and to obtain UITransitionContextViewControllerKey transitions before and after the ViewController, and, in line with above mentioned fromVC and toVC transitions before and after the ViewController is reversible. For example, when A -> B is pushed, A is fromVC and B is toVC. At pop, the positions of the two are reversed.

@ the available (iOS 8.0. *)

func view(forKey key: UITransitionContextViewKey) -> UIView?
Copy the code

In iOS 7 and before, we can only obtain the view before and after the transition by obtaining the ViewController before and after the transition, but in iOS 8 and after, we can directly obtain the view before and after the transition.

var transitionWasCancelled: Bool { get }

This property is a read-only calculated property and indicates whether the transition was cancelled. When the transition animation is an interactive animation, cancellation can be triggered manually while the animation is in progress. This property is true if cancelled and false if not cancelled. For a non-interactive animation, this value is always false.

func completeTransition(_ didComplete: Bool)

This method is called when the transition animation completes or is canceled.

3. Animation controller

The animation Controller protocol defines a set of apis for configuring and implementing transition animations. We create our own class, adhere to the protocol, and then return the custom animation Trasnsition to the system via the transition broker.

There are two main apis in the animation controller:

func transitionDuration(using transitionContext: UIViewControllerContextTransitioning?). -> TimeInterval
Copy the code

This method returns a duration in which the transition animation is defined to last

func animateTransition(using transitionContext: UIViewControllerContextTransitioning)
Copy the code

In this method, define the animation to animate the transition.

4. Interactive controller

The interaction controller protocol is used to configure the interaction events of the transition animation, and the actual animation is still done by the animation controller. System defines UIViewControllerInteractiveTransitioning agreement, but in actual use, we won’t directly observe the agreement, but UIPercentDrivenInteractiveTransition class inheritance.

UIPercentDrivenInteractiveTransitionIs a system-provided class. According to the Official Apple documentation, the easiest way to create an interactive animated object is to inherit this class, as shown below.

The apis of this class are as follows:

open var duration: CGFloat { get } // Animation duration, determined by the return value of transitionDuration

open var percentComplete: CGFloat { get }  // Percentage of completion

open func update(_ percentComplete: CGFloat)  // Update the animation completion percentage

open func cancel(a)  // Unanimate

open func finish(a)  // Finish the animation

/ / appeal UIViewControllerContextTransitioning agreement of the corresponding to the three methods UpdateInteractiveTransition, cancelInteractiveTransition (), finishInteractiveTransition () method

Copy the code

5. Transition coordinator

The transition coordinator is used to help make some auxiliary animations, which are created by the system and can be obtained by using properties in UIViewController’s classification, as shown in the following figure:

In UIViewControllerTransitionCoordinator defines the following API

func animate(alongsideTransition animation: ((UIViewControllerTransitionCoordinatorContext) - >Void)?.completion: ((UIViewControllerTransitionCoordinatorContext) - >Void)? = nil) -> Bool
Copy the code

Adding an animation to this method will continue the animation in the animation closure when the transition animation is finished, whereas adding an animation using UIView.animate(withDuration) will finish when the transition animation is finished.

CATransition

The transition implementation mechanism between viewControllers was introduced above. In CoreAnimation framework, there is also an animation class for layer-level transitions, namely CATransition. The CATransition works on the CALayer, so you need to add it to the Layer property of the View.

CATransition is a class that inherits from CAAnimation. Its own properties are:

open var type: CATransitionType

Copy the code

This attribute indicates the transition type, such as fade, push, and moveIn. For details, see CATransitionDemo

open var subtype: CATransitionSubtype?

Copy the code

This property represents the direction of the transition, but it has no effect for a transition like fade that is direction-independent.

/* The amount of progress through to the transition at which to begin * and end execution. Legal values are numbers in Range [0,1]. * 'endProgress' must be greater than or equal to' startProgress'. * Default values are 0 and 1 respectively. */
    
open var startProgress: Float

open var endProgress: Float

Copy the code

These two properties represent the start and end progress respectively, and together with the duration property of the parent class, control the start and end of the animation. Note that the values of these two properties are [0, 1] and startProgress is less than endProgress.

conclusion

This paper mainly introduces the realization process of transition animation, mainly including the following two parts:

  • ViewController transitions
  • 2. View transition

Five protocols and CATransition corresponding to the transition field respectively. This article only introduces the related API use, specific Demo can refer to the online CATransitionDemo and VCTransitionsLibrary.

Reference documents for this article:

  • IOS View Controller transition details
  • Using UIPercentDrivenInteractiveTransition

Thank you to both bloggers for sharing your knowledge and welcome your comments on the shortcomings of this article.