Mimic AppStore Top Animation

APP Store Top Animations

Features of the top animations of games, apps, Updates in the App Store:

• In the natural state is the headline, and on the right there is a button
  
• When the top goes, it becomes a small title and the right button disappears.
• The navigation bar has a frosted glass effect and can be through the contents of the bottom
• In the natural state, click on the list item to go to the next level, the headline automatically becomes the Back button, and the animation is seamless
  ?

Solutions available on the Web

The online solution is to add a button in the navigation bar in a subView way, and then in the ScrollView scrollViewDidScroll method, adjust the button position and size.

And the App Store's effect is different,

• The button is still fully visible during the navigation bar from the big title to the small title. In the APP Store, the button is partially truncated when the navigation bar is changed from a large title to a small title. So I'm going to write a Demo myself.

Try one (fail)

The basic idea is to put the title and Button as TableView Headerview, and then in scrollViewDidScroll , set the title.

override func scrollViewDidScroll(_ scrollView: UIScrollView) {    if scrollView.contentOffset.y > 64 {        self.navigationItem.title = "Update"    } else {        self.navigationItem.title = nil    }}

?

The effect is as follows:?

The difference between what you can see and the App Store is that

• Under the headline, click Jump, no animation. Because at this point the Title of the previous VC is nil
• In the drop-down process, the title has no effect of getting bigger

Try Two

Imitate the example on the net, use the system Largetitlebar, on the NavBar Addsubview

?

The button's frame is unchanged, and the bottom is aligned with the view. In the process of sliding, change the size of the parent view, which can have a truncated effect, still retains the system navigation bar of the dropdown, controller navigation animation. The effect is as follows:

?

But there is still a bad place, that is, button only hides and shows two states, no alpha value changes.

?

Plus alpha effects

Adjust the view's alpha value based on the progress of the return gesture.
Navigationcontroller has a gesture property interactivePopGestureRecognizer . You can respond to this gesture to get the progress of the transition animation.

    navigationController?.interactivePopGestureRecognizer?.addTarget(self, action: #selector(type(of: self).onGesture(sender:)))@objc func onGesture(sender: UIGestureRecognizer) {    switch sender.state {    case .began, .changed:        if let ct = navigationController?.transitionCoordinator {            topview.alpha =  ct.percentComplete        }    case .cancelled, .ended:        return    case .possible, .failed:        break    }}

The effect is as follows:

?

Reference

• Remove a horizontal line below the Navigationbar
• How to build resizing Image in Navigation Bar with Large Title
• ADD a button to large title navigation bar
• Get progress of Uinavigationcontroller swipe back
• Demo

Mimic AppStore Top Animation