How to fade a UIVisualEffectView and/or UIBlurEffect in and out?

LinusGeffarth picture LinusGeffarth · Mar 27, 2015 · Viewed 46.8k times · Source

I want to fade a UIVisualEffectsView with a UIBlurEffect in and out:

var blurEffectView = UIVisualEffectView()
blurEffectView = UIVisualEffectView(effect: UIBlurEffect(style: .dark))

I use a normal animation within a function called by a UIButton to fade it in, same for fading out but .alpha = 0 & hidden = true:

blurEffectView.hidden = false
UIView.animate(withDuration: 1, delay: 0, options: .curveEaseOut) {
    self.blurEffectView.alpha = 1
}

Now, fading in both directions does work but it gives me an error when fading out:

<UIVisualEffectView 0x7fdf5bcb6e80> is being asked to animate its opacity. This will cause the effect to appear broken until opacity returns to 1.

Question

How do I successfully fade the UIVisualEffectView in and out without breaking it and having a fading transition?

Note

  • I tried to put the UIVisualEffectView into a UIView and fade that one, no success

Answer

jrturton picture jrturton · Sep 25, 2015

I think this is new in iOS9, but you can now set the effect of a UIVisualEffectView inside an animation block:

let overlay = UIVisualEffectView()
// Put it somewhere, give it a frame...
UIView.animate(withDuration: 0.5) {
    overlay.effect = UIBlurEffect(style: .light)
}

Set it to nil to remove.

VERY IMPORTANT - When testing this on the simulator, make sure to set your simulator's Graphics Quality Override to High Quality in order for this to work.