Search code examples
ioscocoa-touchanimationuiviewcontrolleruiviewanimationtransition

Custom UIViewController Transition with Blur

I'm trying to achieve a transition of my UIViewController where is very simply zooms out slightly and blurs so that it sits faded in the background. I have looked at a lot of solutions but I can't find anything surrounding blurring specifically.

Currently I am just playing with taking a screen of the parent view controller and animating that in the child.

Apps such as Tweetbot 3 and Pinterest are notable ones which do this, see a screenshot here, exactly what I mean:

enter image description here

I'm struggling with it smoothly blur out. Any suggestions on how to achieve this effect?

Solution

  • iOS 7 Solution:

    You can display it in UIImageView and place on top of other UIViews. In the past, I used renderInContext in CALayer.

    UIGraphicsBeginImageContext(self.view.bounds.size);
[self.view drawViewHierarchyInRect:self.view.bounds];
UIImage *blurImg = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();

    Once you capture UIView screenshot, apply blur effect. Unfortunately, there is no public API available yet for blur effect, but Apple has a sample implementation in sample code. It's a Category for UIImage. Please search a sample code in Xcode documentations. After adding UIImage category files to your project, you can blur an image like this:

    blurImg = [blurImg applyDarkEffect];

    Prior to iOS 7 Solution: https://github.com/tomsoft1/StackBluriOS

    UIImage *blurImg = [originalImg stackBlur:radius];