UINavigationBar Background Color Animation

Question

I am trying to implement Apple's detail screen from their Podcast, Music, and App Store Apps. The navigation bar starts off transparent then increases the alpha the further down you scroll.

I have the desired effect working changing the alpha value of the navigationBar itself. However, this also affects the buttons within the navigationBar.

func scrollViewDidScroll(_ scrollView: UIScrollView) {
    var offset = scrollView.contentOffset.y / 350
    if offset > 1 {
        offset = 1
        self.navigationController?.navigationBar.alpha = offset
        self.navigationItem.setHidesBackButton(false, animated: false)
    } else {
        self.navigationController?.navigationBar.alpha = offset
        self.navigationItem.setHidesBackButton(true, animated: false)
    }
}

I believe I need to change either

The Navigation Bar's backgroundColor
The Navigation Bar's barTintColor

Upon implimenting each of these and replacing:

self.navigationController?.navigationBar.alpha = offset

with

self.navigationController?.navigationBar.barTintColor = Color.background?.withAlphaComponent(offset)

or

self.navigationController?.navigationBar.backgroundColor = Color.background?.withAlphaComponent(offset)

The animation does not transition, it simply goes from transparent to opaque.

I am setting up my Navigation Bar on this controller using iOS 13 methods

let appearance = UINavigationBarAppearance()
appearance.configureWithOpaqueBackground()
self.navigationController?.navigationBar.standardAppearance = appearance

Any help with this much appreciated.

UINavigationBar Background Color Animation

0 Answers0