ios - 如何实现雅虎天气滚动视图效果？

Question

我对创建类似于 Yahoo Weather 应用程序的 UIScrollView 非常感兴趣。这是视频中的示例：

我找到了这个 Git，它可以让我做淡入淡出背景的事情：

但是我如何在顶部实现模糊效果，以便随着内容向上滚动，它几乎在 UINavigationBar 后面淡出

任何帮助，将不胜感激！！

score 28 · Accepted Answer

我在 Yahoo! 中编写了 UI 效果的代码！天气应用程序，很乐意回答您的问题。

听起来您已经知道如何进行模糊（基于像素偏移的模糊图像之间的淡入淡出，以一定数量最大化......为了获得更好的效果，您可以在模糊中进行多个步骤 - 即在非-模糊到半模糊，然后半模糊到完全模糊等）。

对于淡入淡出的效果，您可以在内容视图的图层上设置 mask 属性：

蒙版是从透明渐变为不透明的图像。

——伊恩。

score 5 · Accepted Answer

我参加聚会可能有点晚了，但我有一个示例项目可以做到这一点。我确实尝试过查看 Yahoo! 伊恩所说的图像蒙版的应用程序。我还没有能够按照他描述的方式使用它。所以我动态创建了一个CALayer来实现效果。

（@Iain，干得好！大粉丝）

score 3 · Accepted Answer

我没有亲自尝试过，但这可能是一个好的开始：https ://github.com/kronik/DKLiveBlur

DKLiveBlur

DKLiveBlur 和演示应用程序的来源，显示类似于雅虎天气 iOS 应用程序的实时模糊效果。

score 1 · Accepted Answer

我使用 FXBlurView 实现了类似的效果： https ://github.com/nicklockwood/FXBlurView

您只需将 blurRadius 设置为相对于滚动量：scrollView.contentOffset.y

score 0 · Accepted Answer

0

感谢 Iain 指出 CALayer 蒙版。

从Evan Davis博客下载模糊示例代码。

于 2013-08-25T05:06:42.637 回答

5 回答 5