Question

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?

Was it helpful?

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];
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top