如何实现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效果的代码.天气应用程序,很乐意回答您的问题.

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

对于某种效果下的淡入淡出,您可以在内容视图的图层上设置mask属性:

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

掩模是从透明变为不透明的图像.

--Iain.

Answer 2

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

(@Iain,很棒的工作!大粉丝)

这是GitHub链接

Answer 3

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

DK实时模糊

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