0

I have two images: a normal, unblurred screenshot, and a blurred version (the iOS 7 blur style) of the same screenshot.

I want to animate the transition from the initial, unblurred screenshot to the blurred one smoothly.

This does not seem possible with simply overlaying the non-blurred one on top and lowering the alpha to 0. It's just changing the transparency of the top one, so especially with text, you get this unsightly effect where the unblurred text just sticks out with the blurred version, not really transforming into one another at all.

enter image description here

On the flip side, in iOS 7 when you hold down the home button to bring up Siri, and then press it again to close, you get a really nice transition from blurred Siri to whatever screen you were in before:

enter image description here

(See? The text isn't just overlaid, it's actually transforming from one to the other!)

So obviously this is possible. How do I achieve this effect? It seems just lowering alpha values won't do it.

Doug Smith
  • 29,668
  • 57
  • 204
  • 388
  • You will have to find a way to render the blur with a different blur radius for each frame of animation. That is the only way to get a blur that smoothly changes size like you are looking for. More difficult, maybe, but much more satisfying. – Zev Eisenberg May 29 '14 at 02:33

1 Answers1

1

Instead of lowering the alpha of the original screenshot, put the blurred one on top of it and raise its alpha. You don't need to modify the unblurred one at all, and this will give you the effect you want.

  1. Set the alpha of blurredImageView to 0
  2. Put blurredImageView on top of regularImageView
  3. Animate the alpha of blurredImageView to 1
Dima
  • 23,484
  • 6
  • 56
  • 83
  • This will have the same problem. The radius of the blur is not increasing, so until it is at 100% opacity, you will still see sharp edges through the blur. – Zev Eisenberg May 29 '14 at 02:32
  • I see what you mean now. The only way I can think of doing that is actually rendering several snapshots with increasing blur radiuses and animating between them. – Dima May 29 '14 at 02:35