Blurring a UIView With Animation – (Archive)

I had to do this the other day so I thought I would share how simple the effect can be achieved. You will need to be building with iOS 8 or above.

Create a new single view Swift project. Add a UIImageView with an image(more interesting images look better) to the supplied Storyboard Viewcontroller, with an IBOutlet in the viewController file. Then create a button with an IBAction in the same viewController.

To get an easy blue effect all we have to do is get an instance of UIBlurEffect and assign it to an instance of UIVisualEffectView as the effect. Then we just add the instance of UIVisualEffectView as a subview to our UIImageView.

To animate the blur effect the simplest way is animate the UIVisualEffectView\’s alpha from 0.0 to 1.0.

//iOS8 example
import UIKit

class ViewController: UIViewController
{
    @IBOutlet weak var imageView: UIImageView!
    
    @IBAction func blurStuff(sender: AnyObject)
    {
        let blurEffect = UIBlurEffect(style: .Light)
        let effectView = UIVisualEffectView(effect: blurEffect)
        effectView.frame = imageView.frame
        imageView.addSubview(effectView)
        effectView.alpha = 0
        
        UIView.animateWithDuration(0.8) {
            effectView.alpha = 1.0
        }
    }
}

Blurring alpha

If you are lucky enough to be only targeting iOS9 upwards you can achieve the same result with less effort. In iOS9 we can leave the effect for UIVisualEffectView as nil and then animate the setting of the effect property. There is a slight visual difference though (looks like a slight pop in contrast). To be honest I prefer the alpha animation.

//iOS9 example
import UIKit

class ViewController: UIViewController
{
    @IBOutlet weak var imageView: UIImageView!
    
    @IBAction func blurStuff(sender: AnyObject)
    {
        let effectView = UIVisualEffectView()
        effectView.frame = imageView.frame
        imageView.addSubview(effectView)
        
        UIView.animateWithDuration(0.8) {
            effectView.effect = UIBlurEffect(style: .Light)
        }
    }
}

Animating effect property