UITabBarController Animation while Transitioning

The animation is a crucial part of User Interfaces. When it comes to transitions in ios mobile applications, there are a lot of things one can communicate very subtly with an animation. Animation draws the end user’s attention towards the item that change and polish the app’s User Interface.

In iOS, many apps come implemented with UITabBarController. By default, switching is plain and the view rendered without any animation. It would be nice if it changes with some animation. In this tutorial, iOS App Development Company India will implement Animation for UITabBarController tab changes using

UIViewControllerAnimatedTransitioning protocol.

Preparation:

1. Create a new project with a Single View App template

2. Open Main.storyboard

3. Add UITarBarController as Initial View Controller to storyboard.

4. Create a new UITabBarController child class

5. Type CustomTabBarController.swift as file name.

6. The code of the CustomTabBarController.swift file should contain the below code:

   class CustomTabBarController: UITabBarController { override func viewDidLoad() { super.viewDidLoad() delegate = self } } // MARK: - UITabBarControllerDelegate extension CustomTabBarController: UITabBarControllerDelegate { func tabBarController(_ tabBarController: UITabBarController, animationControllerForTransitionFrom fromVC: UIViewController, to toVC: UIViewController) -> UIViewControllerAnimatedTransitioning? { return TabBarAnimatedTransitioning() } } // MARK: - UIViewControllerAnimatedTransitioning final class TabBarAnimatedTransitioning: NSObject, UIViewControllerAnimatedTransitioning { func animateTransition(using transitionContext: UIViewControllerContextTransitioning) { guard let destination = transitionContext.view(forKey: UITransitionContextViewKey.to) else { return } destination.alpha = 0.0 destination.transform = .init(scaleX: 1.5, y: 1.5) transitionContext.containerView.addSubview(destination) UIView.animate(withDuration: transitionDuration(using: transitionContext), animations: { destination.transform = .identity destination.alpha = 1 }, completion: { transitionContext.completeTransition($0) }) } func transitionDuration(using transitionContext: UIViewControllerContextTransitioning?) -> TimeInterval { return 0.30 } }

7. Let’s have a look at the code and see what APIs have used here.

   • tabBarController(_:animationControllerForTransitionFrom:to:)

     Called to agree on the delegate to return a UIViewControllerAnimatedTransitioning envoy object for use during a noninteractive tab bar view controller transition.

   • TabBarAnimatedTransitioning

     An Animator object that conforms to UIViewControllerAnimatedTransitioning protocol.

   • transitionDuration(using:)

     Asks your animator object for the period (in seconds) of the transition animation.

   • animateTransition(using:)

     Says your animator object to do the transition animations.

8. In Main.storyboard, set CustomTabBarController class to UITabBarController

9. That’s it. Fire the app up, and you'll see that the UI is rendered with animation when switching to the tab.

Conclusion:

The Animation has been one of the most powerful tools through which one can attract a large number of users. It gives life to a simple looking User Interface design and helps in improving the interaction with the users as well.

The animation is a big part of the user experience. It is very powerful, especially when used in sophisticated ways. It makes the iOS mobile application feel alive and responsive to the end user. It also adds a lot of fun to the UI.