如何在指定ViewController中带默认动画修改UINavigationBar背景色

Great question! I’ve implemented this exact smooth transition before—LinkedIn’s subtle color shift between screens is a polished touch, and it’s totally doable with iOS’s built-in tools without any weird hacks. Let’s walk through two reliable approaches, depending on your iOS version support.

Basic Approach (Works for All iOS Versions) #

If you need to support iOS 12 and below, or prefer a straightforward method, you can animate the barTintColor (for older iOS) or backgroundColor (iOS 13+) directly using UIView.animate. The key is to trigger the animation during view lifecycle events to sync with push/pop transitions.

Step 1: Animate to Target Color on View Appearance #

Add this to your target ViewController’s viewWillAppear method:

override func viewWillAppear(_ animated: Bool) {
    super.viewWillAppear(animated)
    
    // Match the animation speed to your app's overall feel (0.3s is close to LinkedIn's)
    UIView.animate(withDuration: 0.3, options: .curveEaseInOut) {
        // For iOS 13+, use backgroundColor
        self.navigationController?.navigationBar.backgroundColor = .systemBlue
        // For iOS <13, use barTintColor instead:
        // self.navigationController?.navigationBar.barTintColor = .systemBlue
        
        // Optional: Disable translucency if you want solid color transition
        self.navigationController?.navigationBar.isTranslucent = false
    }
}

Step 2: Animate Back to Original Color When Leaving #

Don’t forget to revert the color when the view disappears, so other screens maintain their original navigation bar style:

override func viewWillDisappear(_ animated: Bool) {
    super.viewWillDisappear(animated)
    
    UIView.animate(withDuration: 0.3, options: .curveEaseInOut) {
        // Revert to your app's default navigation bar color
        self.navigationController?.navigationBar.backgroundColor = .systemBackground
        // For iOS <13:
        // self.navigationController?.navigationBar.barTintColor = .systemBackground
        
        // Re-enable translucency if that's your app's default
        self.navigationController?.navigationBar.isTranslucent = true
    }
}

Modern Approach (iOS 13+) Using UINavigationBarAppearance #

For iOS 13 and later, Apple’s UINavigationBarAppearance API is the recommended way to style navigation bars—it’s more flexible and consistent, especially if you use large titles or scrollable content. Animating appearance changes works seamlessly too.

Step 1: Predefine Your Navigation Bar Styles #

Store the target and original appearance as lazy properties in your ViewController (this avoids recreating them every time):

private lazy var targetBarAppearance: UINavigationBarAppearance = {
    let appearance = UINavigationBarAppearance()
    appearance.backgroundColor = .systemBlue // Your desired screen-specific color
    // Optional: Tweak other styles to match the color (e.g., white title text)
    appearance.titleTextAttributes = [.foregroundColor: UIColor.white]
    appearance.shadowColor = .clear // Remove the bottom shadow if needed
    return appearance
}()

private lazy var originalBarAppearance: UINavigationBarAppearance = {
    let appearance = UINavigationBarAppearance()
    appearance.backgroundColor = .systemBackground // Your app's default color
    appearance.titleTextAttributes = [.foregroundColor: UIColor.label]
    return appearance
}()

Step 2: Animate the Appearance Switch #

Update the navigation bar’s appearance inside an animation block during view lifecycle events:

override func viewWillAppear(_ animated: Bool) {
    super.viewWillAppear(animated)
    
    UIView.animate(withDuration: 0.3) {
        self.navigationController?.navigationBar.standardAppearance = self.targetBarAppearance
        // Update scrollEdgeAppearance too if you use large titles or scroll under the bar
        self.navigationController?.navigationBar.scrollEdgeAppearance = self.targetBarAppearance
    }
}

override func viewWillDisappear(_ animated: Bool) {
    super.viewWillDisappear(animated)
    
    UIView.animate(withDuration: 0.3) {
        self.navigationController?.navigationBar.standardAppearance = self.originalBarAppearance
        self.navigationController?.navigationBar.scrollEdgeAppearance = self.originalBarAppearance
    }
}

Key Tips for Smooth Results #

• Sync with Transitions: Using viewWillAppear and viewWillDisappear ensures the color animation runs in sync with push/pop transitions, just like LinkedIn’s implementation.
• Animation Timing: Adjust withDuration to match your app’s animation speed—0.3-0.4 seconds feels natural for most cases.
• Translucency: If your navigation bar is translucent, setting isTranslucent = false before animating will give you a crisp solid color transition. Re-enable it if that’s your app’s default style when leaving the screen.

内容的提问来源于stack exchange，提问作者Mohammad Reza Koohkan