我该如何实现雅虎天气的滚动视图效果？

Question

我非常感兴趣创建一个类似于Yahoo天气应用程序的UIScrollView。以下是视频示例: http://www.youtube.com/watch?v=a-q_yetkpik 我找到了这个Git，可以让我做淡出背景的事情: https://github.com/justinmfischer/core-background 但是如何实现顶部的模糊效果，以便随着内容向上滚动，它几乎在UINavigationBar后面淡出？

任何帮助将不胜感激！！

- Omar

---

“雅虎效应”（The yahoo effect），正如我所说，其实非常酷。我也想学习这个效果。我觉得这个效果可以通过使用透明的UINavigationBar和在滚动到一定位置后自动模糊UIImage来实现。也许可以用if else语句来实现。 - user2329093

Answer 1

我写了 Yahoo! 天气应用中 UI 特效的代码，很乐意回答你的问题。

听起来你已经搞清楚了如何实现模糊效果（基于像素偏移的模糊图像之间的淡入淡出，最高可达一定程度...为了更好的效果，你可以在模糊中设置多个步骤 - 比如从未模糊到半模糊，然后从半模糊到全模糊等）。

对于下方淡出效果，你可以在内容视图的层上设置蒙版属性：

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

蒙版是一个从透明到不透明淡入的图像。

--Iain。

- Iain Huxley

---

很棒的应用，顺便说一句。看起来既简单又酷。我喜欢启动它并盯着它看。让我感到放松 :) 不过我有一个关于风车动画的问题。我们怎么讨论呢？ - Schultz9999

@Lain，很棒的应用！顺便问一下，为什么顶部有紫色线条？有什么特别的原因吗？只是好奇 :) - TeaCupApp

@Lain，你用了什么模糊方法？我真的很喜欢你达到的效果。 - nibeck

Iain，如果我能为你的分享和解释技巧点赞十几次，我一定会这么做。如果可以的话，我还会再点赞十几次，因为你的应用实在是太美妙了。说真的，我以为我只能忍受那些糟糕的天气应用，但雅虎天气就像沙漠中的绿洲一样让人感到惊喜。 - Cyprus106

Answer 2

我可能有点晚了，但是我有一个示例项目可以完全实现这一点。我试图查找雅虎应用程序中Iain所说的图像蒙版，但我还没有能够按照他描述的方式使用它。因此，我在飞行中创建了一个CALayer以实现效果。

（@Iain，做得好！大粉丝） 这里是GitHub链接

- Byte

Answer 3

我个人没有尝试过，但这可能是一个不错的开始：https://github.com/kronik/DKLiveBlur DKLiveBlur DKLiveBlur的源代码和演示应用程序，展示了类似于Yahoo天气iOS应用程序的实时模糊效果。

- Yazid

Answer 4

我使用FXBlurView达到了类似的效果： https://github.com/nicklockwood/FXBlurView 你只需根据滚动量设置模糊半径：scrollView.contentOffset.y

- Oren

Answer 5

感谢Iain指出CALayer遮罩的用法。

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

- chongsj