Как анимировать панель навигации, например страницу сведений о AppStore?

Question

Панель навигации, как в AppStore

Сначала отображается прозрачная панель навигации, а при прокрутке приложения вверх становится видимой панель навигации.

Пожалуйста, проверьте эффект в Gif-файле, добавленном с этим вопросом

Answer 1

Если вы хотите сделать панель навигации такой же, как в App Store, я предлагаю вам удалить панель навигации по умолчанию и создать настраиваемую верхнюю панель, выбрав UIView и установив ее рамку в качестве верхней панели.

Основная причина заключается в том, что панель навигации по умолчанию не выглядит разумно, а поведение выглядит хорошо на iPhone X и таких телефонах.

Еще одна важная вещь: возможно, вы сможете достичь ее по умолчанию на панели навигации, но Apple всегда продолжает модифицировать систему навигации, и поэтому вы можете видеть устаревшие методы, особенно в навигации.

Так что я лучше предлагаю, если вы создадите пользовательскую навигацию, она будет легко управляемой и не будет шансов для устаревших методов и всего.

Надеюсь, это поможет вам.

Answer 2

Сначала настройте прозрачную панель навигации, как показано ниже

// Makes the navigation bar transparent
navigationController?.navigationBar.setBackgroundImage(UIImage(), for: UIBarMetrics.default)
navigationController?.navigationBar.shadowImage = UIImage()
navigationController?.navigationBar.isTranslucent = true
navigationController?.view.backgroundColor = UIColor.clear

Теперь использует UIScrollViewDelegate метод scrollViewDidScroll, чтобы определить процент просмотра прокрутки и на основе этого изменения альфа

  // MARK: UIScrollViewDelegate

    override func scrollViewDidScroll(_ scrollView: UIScrollView) {
        super.scrollViewDidScroll(scrollView)

        let maximumVerticalOffset = scrollView.contentSize.height - scrollView.frame.height
        let currentVerticalOffset = scrollView.contentOffset.y
        let percentageVerticalOffset = currentVerticalOffset / maximumVerticalOffset

        let color = UIColor.init(red: 255/255.0, green: 255/255.0, blue: 255/255.0, alpha: percentageVerticalOffset)
        navigationController?.navigationBar.backgroundColor = color
    }

Надеюсь, это полезно для вас