美文网首页iOS开发
tabbar 页面切换动画

tabbar 页面切换动画

作者: _浅墨_ | 来源:发表于2022-04-22 22:34 被阅读0次

最终效果:

tabbar切换动画.gif

主要代码:

TabBarDelegate.swift:

import Foundation

import UIKit

class TabBarDelegate: NSObject, UITabBarControllerDelegate {
    
    func tabBarController(_ tabBarController: UITabBarController, shouldSelect viewController: UIViewController) -> Bool {
        
        let selectedViewController = tabBarController.selectedViewController
        
        if selectedViewController == nil || viewController == selectedViewController {
            
            return false
            
        }
        
        guard let controllerIndex = tabBarController.viewControllers?.firstIndex(of: viewController) else {
            
            return true
            
        }
        
        guard let fromView = selectedViewController?.view else {
            
            return true
            
        }
        
        guard let toView = viewController.view else {
            
            return true
            
        }
        
        let viewSize: CGRect = fromView.frame
        
        let scrollRight: Bool = controllerIndex > tabBarController.selectedIndex
        
        fromView.superview?.addSubview(toView)
        
        let screenWidth: CGFloat = UIScreen.main.bounds.size.width
        
        toView.frame = CGRect(x: scrollRight ? screenWidth : -screenWidth, y: viewSize.origin.y, width: screenWidth, height: viewSize.size.height)
        
        UIView.animate(withDuration: 0.3, delay: 0, options: [.curveEaseInOut], animations: {
            
            fromView.frame = CGRect(x: scrollRight ? -screenWidth : screenWidth, y: viewSize.origin.y, width: screenWidth, height: viewSize.size.height)
            
            toView.frame = CGRect(x: 0, y: viewSize.origin.y, width: screenWidth, height: viewSize.size.height)
            
        }) { (success) in
            
            if (success) {
                
                fromView.removeFromSuperview()
                
                tabBarController.selectedIndex = controllerIndex
                
            }
            
        }
        
        return false
        
    }
    
}

使用方法:

import UIKit

let tabBarDelegate = TabBarDelegate()

@UIApplicationMain
class AppDelegate: UIResponder, UIApplicationDelegate {

    var window: UIWindow?

    func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
        // Override point for customization after application launch.
        
        let tabController = UITabBarController()
        
        let mainStoryboard = UIStoryboard(name: "Main", bundle: nil)
        
        let firstVC = mainStoryboard.instantiateViewController(withIdentifier: "firstVC") as! ViewController
        
        let secondVC = mainStoryboard.instantiateViewController(withIdentifier: "secondVC") as! SecondViewController
        
        firstVC.view.backgroundColor = UIColor.red
        
        secondVC.view.backgroundColor = UIColor.orange
        
        let vcData: [(UIViewController, UITabBarItem)] = [
            (firstVC, UITabBarItem.init(tabBarSystemItem: UITabBarItem.SystemItem.featured, tag: 1)),
            (secondVC, UITabBarItem.init(tabBarSystemItem: UITabBarItem.SystemItem.contacts, tag: 1))
        ]
        
        let vcs = vcData.map { (vc, tabBarItem) -> UINavigationController in
            
            let nav = UINavigationController(rootViewController: vc)
            
            nav.tabBarItem = tabBarItem
            
            return nav
            
        }
        
        tabController.viewControllers = vcs
        
        tabController.tabBar.isTranslucent = false
        
        tabController.delegate = tabBarDelegate
        
        window?.rootViewController = tabController
        
        return true
    }


}

demo 下载: https://github.com/MFiOSDemos/CustomTabAnimation

相关文章

网友评论

    本文标题:tabbar 页面切换动画

    本文链接:https://www.haomeiwen.com/subject/jlroertx.html