制作一个类似iOS 8天气应用的动画

Question

我想创建一个视图，其中包含 iOS 8 天气应用程序中存在的动画。我试着更详细地解释我所做的事情。如果有任何不正确的地方，请指导我。

1. 在顶部，我放置了一个温度标签。（大号的那个）
2. 在该标签下方，我放置了另一个标签来显示一些文本。在天气应用程序中，有水平滚动视图显示逐小时预报。
3. 接下来是表视图。

我想要实现的是，当我开始滚动时，第一个标签会平滑地消失，第二个标签会到屏幕顶部，同时表格视图会拉伸以显示更多内容。当我向顶部滚动时，整个过程会倒转。 如何才能最好地实现这一点？

- sdtaheri

Answer 1

我最近为我正在创建的应用程序重新创建了iOS8天气应用程序的滚动效果。

完整的代码太长了，无法在此处发布，但对于任何感兴趣的人，我已经将其放在GitHub上。您可以下载并运行该项目以查看其外观。欢迎改进代码：

UIScrollView带有遮罩内容。

它的工作原理如下：

1. 您有一个滚动视图（屏幕大小），其中包含一个子视图（遮罩层），该子视图又有一个子视图（内容）。我们还在屏幕顶部添加了一个大标签（在天气应用程序中，它显示温度）。

2. 然后，您使用 scrollViewDidScroll 代理方法将遮罩固定在屏幕上，随着用户滚动，遮罩会保持不变。您还使用此方法首先向上拉伸面罩。

3. 将面罩固定到屏幕上意味着面罩的子视图（我们的内容）也变为固定状态。但是我们希望它可以滚动，因此我们对与面罩相反的内容执行相同的操作（再次使用 scrollViewDidScroll）。

4. 我们需要面罩实际上像一个面罩一样行事，因此我们在面罩上设置 clipsToBounds = YES。

5. 最后，我们在滚动期间使用滚动视图的偏移量来移动和淡化屏幕顶部的大标签。

要使其完全像 iOS8 天气应用程序一样运行，我们还需要执行以下操作：

• 取消在遮罩层上方发生的任何滚动触摸，即大温度显示器上方的滚动。
• 确保如果用户没有完成滚动操作，则通过编程方式完成移动温度显示的初始滚动。
• 添加一个横向滚动的子视图，该视图锚定在遮罩层顶部。

我还没有做这些。

- Doug Proctor