如何实现Yahoo Weather ScrollView Effect？

Question

我真的很想创建类似于Yahoo Weather应用程序的UIScrollView。以下是视频的示例：

http://www.youtube.com/watch?v=a-q_yetkpik

我找到了这个Git，它会让我做淡化背景的事情：

https://github.com/justinmfischer/core-background

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

任何帮助都将不胜感激!!

Answer 1

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

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

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

https://developer.apple.com/library/mac/documentation/graphicsimaging/reference/CALayer_class/Introduction/Introduction.html#//apple_ref/occ/instp/CALayer/mask

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

- 伊恩

Answer 2

我可能有点迟到了，但我有一个示例项目正是这样做的。我确实试图通过Yahoo! Iain所说的图像面具的应用程序。我还没能像他描述的那样使用它。所以我动态创建了一个CALayer来实现这个效果。

（@ Iain，很棒的工作！大粉丝）

Here is the GitHub link

Answer 3

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

  

DKLiveBlur

     

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

Answer 4

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

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

Answer 5

感谢Iain指出CALayer面具。

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