如何为App Store App Detail Page之类的导航栏制作动画？

Question

像AppStore一样的导航栏

首先透明导航栏，当应用向上滚动时导航栏可见。

请检查添加此问题的Gif文件中的效果

Answer 1

首先像下面这样设置导航栏透明

// 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 检测滚动视图的百分比，并根据该百分比更改 alpha

  // 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
    }

希望对您有所帮助

Answer 2

如果您想使导航栏与 App Store 相同，我建议您删除默认导航栏并通过使用 UIView 创建自定义顶部栏并将其框架设置为顶部栏。

主要原因是默认导航栏在 iPhone X 和此类手机上看起来不明智且行为不明智。

另一件最重要的事情是，您可能可以通过默认导航栏实现它，但 Apple 总是不断修改导航系统，因此您可以在导航中看到特别不推荐使用的方法。

所以我最好建议如果您创建自定义导航，它将很容易控制，并且不会有弃用的方法和所有方法。

希望对您有所帮助。

如何为App Store App Detail Page之类的导航栏制作动画？

How to animate Navigationbar like AppStore App Detail Page?

app-store

navigationbar

ios

swift