Shulou(Shulou.com)06/03 Report--

This article is about how iOS customizes the transition animation. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

ready

First, we now introduce several protocols that you need to contact when customizing the transition animation:

UIViewControllerAnimatedTransitioning: an example that implements this protocol controls the effect of transition animation. UIViewControllerInteractiveTransitioning: an example that implements this protocol controls the progress of the transition using gestures.

After we have defined the classes that implement the above two protocols, we only need to provide the corresponding objects where the transition is needed.

Ps: in the following example, please ignore the animation effect and focus on the implementation. In fact, I am too lazy to write too many animations. ? ‍♂️)

Mode Jump (Present)

Scene

Self.present (animated: true) {} self.dismiss (animated: true) {}

Implementation steps

Set the transitioningDelegate object of the ViewController that will present, which is an instance that implements the protocol UIViewControllerTransitioningDelegate. Implement several proxy methods in the UIViewControllerTransitioningDelegate protocol and return the animation effect control class that implements the UIViewControllerAnimatedTransitioning protocol.

UIViewControllerTransitioningDelegate methods that need to be implemented:

/ / return custom transition animation optional func animationController (forPresented presented: UIViewController, presenting: UIViewController, source: UIViewController)-> UIViewControllerAnimatedTransitioning?// return custom transition animation optional func animationController (forDismissed dismissed: UIViewController)-> UIViewControllerAnimatedTransitioning?

Example

/ / Click to jump to func presentClick (_ sender: Any) {let vc = self.storyboard?.instantiateViewController (withIdentifier: "PresentSecondViewController") vc?.modalPresentationStyle = .fullscreen vc?.transitioningDelegate = self self.present (animated: true) {} / / the first VC implementation protocol in the first VC Return the instance extension PresentFirstViewController: UIViewControllerTransitioningDelegate {func animationController (forPresented presented: UIViewController, presenting: UIViewController, source: UIViewController)-> UIViewControllerAnimatedTransitioning? {return NormalPresentAnimator ()} func animationController (forDismissed dismissed: UIViewController)-> UIViewControllerAnimatedTransitioning? {return NormalPresentAnimator ()}}

Navigation Controller Jump (Push)

Scene

Self.navigationController?.pushViewController (animated: true) self.navigationController?.popViewController (animated: true)

Implementation steps

Set the delegate of the navigation controller UINavigationController. Implement the proxy method in the UINavigationControllerDelegate protocol and return the animation effect control class that implements the UIViewControllerAnimatedTransitioning protocol.

UINavigationControllerDelegate methods that need to be implemented:

Optional func navigationController (_ navigationController: UINavigationController, animationControllerFor operation: UINavigationController.Operation, from fromVC: UIViewController, to toVC: UIViewController)-> UIViewControllerAnimatedTransitioning?

Example

Class PushFirstViewController: UIViewController {override func viewDidLoad () {super.viewDidLoad () self.navigationController?.delegate = self} @ IBAction func pushClick (_ sender: Any) {let vc = self.storyboard?.instantiateViewController (withIdentifier: "PushSecondViewController") self.navigationController?.pushViewController (animated: true)}} extension PushFirstViewController: UINavigationControllerDelegate {/ / return custom transition animation func navigationController (_ navigationController: UINavigationController, animationControllerFor operation: UINavigationController.Operation, from fromVC: UIViewController To toVC: UIViewController)-> UIViewControllerAnimatedTransitioning? {if operation = = .pop & & fromVC is PushFirstViewController {return nil} return NormalPushAnimator ()}}

UITabbarController

In the previous two special field implementations, we implemented the UIViewControllerTransitioningDelegate and UINavigationControllerDelegate methods in the classes that need to transition, and there are several other methods in these two protocols:

/ / UIViewControllerTransitioningDelegateoptional func interactionControllerForPresentation (using animator: UIViewControllerAnimatedTransitioning)-> UIViewControllerInteractiveTransitioning?optional func interactionControllerForDismissal (using animator: UIViewControllerAnimatedTransitioning)-> UIViewControllerInteractiveTransitioning?/// UINavigationControllerDelegateoptional func navigationController (_ navigationController: UINavigationController, interactionControllerFor animationController: UIViewControllerAnimatedTransitioning)-> UIViewControllerInteractiveTransitioning?

What about the above methods? In fact, it is the progress processing method of the transition through the use of hand gestures. We need to return an object that implements the UIViewControllerInteractiveTransitioning protocol in the proxy method to control the transition progress. In the following UITabbarController, I implement an example of using gestures to control transitions. Present and Push/Pop can be implemented in the same way.

Scene

UITabbarController has no animation effect when switching controllers by default. If we need animation, we need to customize it.

Implementation steps

Sets the delegate of the UITabbarController. Implement the proxy method in UITabBarControllerDelegate protocol, return the animation effect control class that implements UIViewControllerAnimatedTransitioning protocol, and return the transition progress control class that implements UIViewControllerInteractiveTransitioning protocol.

/ return func tabBarController (_ tabBarController: UITabBarController, animationControllerForTransitionFrom fromVC: UIViewController, to toVC: UIViewController)-> UIViewControllerAnimatedTransitioning?/// returns the instance func tabBarController (_ tabBarController: UITabBarController, interactionControllerFor animationController: UIViewControllerAnimatedTransitioning) that implements the UIViewControllerInteractiveTransitioning protocol-> UIViewControllerInteractiveTransitioning?

Example

Class TabbarController: UITabBarController, UITabBarControllerDelegate {override func viewDidLoad () {super.viewDidLoad () self.delegate = self} func tabBarController (_ tabBarController: UITabBarController, animationControllerForTransitionFrom fromVC: UIViewController, to toVC: UIViewController)-> UIViewControllerAnimatedTransitioning? {if self.selectedIndex = = 0 {return TabbarAnimator (edge: .right)} else {return TabbarAnimator (edge: .left)} func tabBarController (_ tabBarController: UITabBarController) InteractionControllerFor animationController: UIViewControllerAnimatedTransitioning)-> UIViewControllerInteractiveTransitioning? {if self.panGesture.state = = .began | | self.panGesture.state = = .changed {return TabbarInteractionTransition (pan: self.panGesture)} else {return nil}}

Tripartite Framework-- Lottie

Introduction

Lottie is a mobile library for Android and iOS, using bodymovin to parse animations exported from Adobe After Effects to json and generate vector animations on mobile devices. Designers can easily create beautiful (complex) animations without the painstaking manual creation and debugging of programmers.

Scene

When implementing some special transitions and the programmer does not have enough time to debug the animation.

Implementation steps

Import the Lottie frame in the project. In the classes that need to transition, Lottie import. Because the transition implemented by Lottie is actually the transition of Present, set the transitioningDelegate of the controller that will be Present. Implement several proxy methods in the UIViewControllerTransitioningDelegate protocol and return an example of LOTAnimationTransitionController initialized with a transition animation json file.

The LOTAnimationTransitionController of ps:Lottie transition has been removed after version 3.0.0, so when you need to use Lottie for transition, you need to specify an earlier version when importing. What I use here is 2.5.3.

Example

/ / the first VCfunc presentClick (_ sender: Any) {let vc = self.storyboard?.instantiateViewController (withIdentifier: "LottieSecondViewController") vc?.transitioningDelegate = self self.present (animated: true) {}} / implement UIViewControllerTransitioningDelegate Return LOTAnimationTransitionController instance extension LottieFirstViewController: UIViewControllerTransitioningDelegate {func animationController (forPresented presented: UIViewController, presenting: UIViewController, source: UIViewController)-> UIViewControllerAnimatedTransitioning? {let transitionController = LOTAnimationTransitionController (animationNamed: "Count", fromLayerNamed: ", toLayerNamed:", applyAnimationTransform: false) return transitionController} func animationController (forDismissed dismissed: UIViewController)-> UIViewControllerAnimatedTransitioning? {let transitionController = LOTAnimationTransitionController (animationNamed: "Three", fromLayerNamed: ", toLayerNamed:", applyAnimationTransform: false) return transitionController}}

Thank you for reading! This is the end of this article on "how to customize the transition animation in iOS". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it out for more people to see!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.