How to achieve the effect of Weather Weather ScrollView?

Question

I'm really interested in creating a UIScrollView similar to the Yahoo Weather app. Here is an example video:

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

I found this Git that will make me do a fold thing:

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

But how would you achieve a blur effect at the top, since as the content scrolls, it almost disappears behind the UINavigationBar

Any help would be appreciated!

Answer 1

I wrote code for user interface effects in Yahoo! Weather, we will be happy to answer your question.

It looks like you understood how to make the blur (disappear between the blurry image based on pixel displacement, maximize to a certain extent ... for an even better effect, you can have several steps in the blur - i.e., disappear between non-blurred to half blurred, then semi-blurry until completely blurred, etc.).

To fade under the effect, you can set the mask property at the content content level:

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

A mask is an image that fades from transparent to opaque.

-. Iain

Answer 2

I’m probably a little late for the party, but I have an example project that does just that. I tried to browse Yahoo! an application for the specified image mask that Ian was talking about. I still can not use it as he described. So I created CALayer on the fly to achieve the effect.

(@Iain, awesome work! Big fan)

Here is the GitHub link

Answer 3

I have not personally tried it, but this may be a good start: https://github.com/kronik/DKLiveBlur

DKLiveBlur

Sources of the DKLiveBlur and Demo app for displaying the blur effect in real time, similar to the iOS weather app iOS.

Answer 4

I got a similar effect using FXBlurView: https://github.com/nicklockwood/FXBlurView

You simply set blurRadius relative to the scroll amount: scrollView.contentOffset.y

Answer 5

Thanks to Iain for pointing out the CALayer mask.

Download the sample blur code from Evan Davis 's blog .