SwiftUI: Animate Tab bar tab switch with a CrossDissolve slide?

XCode 12 — iOS 14

In this tutorial, We are going to implement CrossDissolve slide animation for Tab bar view.

We cannot achieve CrossDissolve animation in SwiftUI itself, unless we create custom tab bar. In this tutorial, We are going to implement crossDissolve for native Tab-bar.

As Tabbar does not give any API to add custom animation, We are going to inspect Tab-bar for UIKit’s UITabbar. After getting UITabbar, we implement the animation.

To get UITabbar using following library.

siteline/SwiftUI-Introspect

import SwiftUI
import Introspect //To Get UIView in view hierarchy 
@main
struct LoopingVideoApp: App {
   var body: some Scene {
      WindowGroup {
        TabView {
          NavigationView {
             List {
                 Text("Menu list item 1")
              }.navigationBarTitle("Menu")
           }.tabItem {
             Label("Menu", systemImage: "list.dash")
           }
         NavigationView {
            List{
               Text("Order list item 1")
           }.navigationBarTitle("Order")
         }.tabItem {
             Label("Order", systemImage: "square.and.pencil")
         }
       }.introspectTabBarController { (tabBarController) in //Introspect library
         tabBarController.delegate = tabBarControllerDelegate //update delegate
       }
    }
  }
}
final class TabBarControllerDelegate: NSObject, UITabBarControllerDelegate {
func tabBarController(_ tabBarController: UITabBarController, animationControllerForTransitionFrom fromVC: UIViewController, to toVC: UIViewController) -> UIViewControllerAnimatedTransitioning? {
   //add transition logic here
 }
}

I borrowed transition logic from here:

How to animate Tab bar tab switch with a CrossDissolve slide transition?

Logic:

1. Get from and to view controller using UITransitionContextViewControllerKey
2. Get frame fo fromVC or toVC
3. Check if view is moving right or left based on its index
4. Update the frame respectively 
5. perform move operation

Final code: