Blur Effect you want!

Final Blur Effect that we can easily achieve

If you have been developing iOS apps for more than half of year and you are crazy about UI, then you probably had to create Blur Effect. Sometimes it’s necessary to blur the current UIWindow background and show anything in the foreground like fill-out UI components, UIView with some information, UIAlertViewcontroller’s etc. Apple provides various implementation options, but once again faced with such a task, the most popular of them didn’t help me to achieve the desired result. I would like the Blur Effect to have two important properties: Extensibility (customization) and high speed.

In my projects requiring UIImage processing (which also includes Blur Effects) often had to think about performance. To maintain high performance Accelerate framework will help us. Accelerate is used to make large-scale mathematical and image calculations much easier for developers and optimized for high performance tasks. It is worth mentioning that this framework requires a separate article but now we will make perfect Blur Effect with it.

The algorithm of this approach is pretty simple: PresentedViewController makes a snapshot of the content under it and then apply blur filter on created snapshot. Below is the code of our presented controller:

BlurViewController with extension

All that remains is to write the applyGaussianBlur method for our image. Below I showed the code using the Accelerate framework:

Apply gaussian blur method

Explanations for the code is a separate article, which I will definitely write soon :) It should be noted that the GAUSIAN_TO_TENT_RADIUS_RADIO property can be adjusted depending on what radius is needed. This method gives a good performance and instantly processes the image. As the result we can see:

With blur radius 4, 10 and 23

Another approaches to create Blur Effect:

1. The most popular way is to use UIVisualEffectView which is use UIBlurEffect by its own. It’s quite easy to create, and the final result can satisfy in rare cases:

UIBlurEffect has 5 styles, but the problem is that they are not extensible. We can’t control the radius of the blur of a UIVisualEffectView. We can use hacks and give the impression that the blur radius changes, but this is not a good approach and I would advise to avoid such kludge. In addition, there are other possibilities:

2. Another way to implement is Gaussian blur effect. CIFilter has an effect that blurs the input image, moreover, the filter allows us to set the blur radius value. The concept of such a blur will be slightly different: In this case to get such an effect we need to make a snapshot of the background, and then apply a filter to it. The big disadvantage of this approach is its slow execution. Image transformation, applying of the CIFilter and cgImage creation requires resources and substantial time, but we want to show the controller without any delay.

3. We can obtain private class “_UICustomBlurEffect” and use it as UIBlurEffect effect. But this is an extremely unsafe and undocumented way. Never do this.
UPD: Someone in a comments on SO noticed that it does not work with 14 iOS

In this article, I showed several ways to create a Blur Effect and I hope gave an incentive to learn new frameworks. I will be glad to hear reasonable criticism, feel free to comment. Thank you :)