如何在 iOS 音乐 App 中向上滚动时实现 UINavigationBar 动画？

Posted 2023-02-27

【中文标题】如何在 iOS 音乐 App 中向上滚动时实现 UINavigationBar 动画？

【英文标题】：How do I achieve UINavigationBar animation while scrolling up in iOS Music App?

【发布时间】：2016-04-05 18:47:34

【问题描述】：

当您转到原生 ios 音乐应用程序时，您会在查看专辑时发现非常酷的效果。

看起来视图是一个具有透明 UINavigationController 的 UITableView，当您向上滚动时，视图的第一行会消失并进入带有专辑标题的导航栏。

这里实际发生了什么，是否有一个已知的框架可以做到这一点？

【参考方案1】：

我没有找到任何组件，所以我尝试自己实现一些东西。

基本上，我在情节提要中设置了一个自定义标题视图并将其约束到导航栏，并带有约束的出口。

然后在 scrollView 委托中，我根据滚动量和 scrollView 的 contentOffset 调整约束的常量值以及标题和导航栏标题的 alpha。

我在这里放了一个示例项目：

https://github.com/ale84/CustomTableViewHeaderExample

【参考方案2】：

这里有一些事情在起作用。

如果我要实现这个，我会首先在我的UITableViewController 子类中设置一个观察者，观察UITableView。更具体地说，观察tableview 的y 位置或当前第一个暴露的indexPath。然后，标题视图（专辑封面、分享、收藏等）将与y 位置相关联。标题视图的 alpha 在这里也发生了变化。也在变化；有多少标题视图向用户公开。 headerview 是UITableviewController 的一个属性，可以随着动画的进行进行操作。变化率可以通过UIGestureRecognizers 速度推断出来（这里有一个提示：Implement velocity in custom UIGestureRecognizer）。

至于导航栏，我会将专辑名称设置为导航栏标题（在演示中），但将其隐藏。动画完成后（y位置高于一定阈值），设置导航栏标题不隐藏。

【讨论】：

谢谢@BenJammin 我与你所说的几乎在同一页面上，除了我打算使用第一个表格行作为标题，但正如你提到的那样，使用 tableview 标题视图要好得多。但这是很多手工工作......我只是惊讶没有人建立一个这样做的库。

你不需要 tableView 上的观察者，回调在 UIScrollViewDelegate 中（UITableViewDelegate 继承自）;)