Introduction

If you want a blur view to appear and disappear smoothly in UIKit, there are two different effects you can animate. You can fade the entire UIVisualEffectView by changing its alpha, or you can animate the blur material itself by changing the effect property between nil and a UIBlurEffect.

Both techniques are valid, but they do not look the same. Fading alpha treats the blur like any other view. Animating effect makes the material itself transition, which usually feels more natural in iOS.

Fade the Whole View with alpha

If the blur is already configured and you just need a quick show or hide animation, animating alpha is the simplest approach:

1import UIKit
2
3final class AlphaBlurViewController: UIViewController {
4    private let blurView = UIVisualEffectView(effect: UIBlurEffect(style: .systemMaterial))
5
6    override func viewDidLoad() {
7        super.viewDidLoad()
8
9        blurView.frame = view.bounds
10        blurView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
11        blurView.alpha = 0
12        view.addSubview(blurView)
13    }
14
15    func showBlur() {
16        UIView.animate(withDuration: 0.25) {
17            self.blurView.alpha = 1
18        }
19    }
20
21    func hideBlur() {
22        UIView.animate(withDuration: 0.25) {
23            self.blurView.alpha = 0
24        }
25    }
26}

This works well when the blur is acting like an overlay behind a sheet, menu, or modal. It is also useful when you want to animate other subviews on top of the blur at the same time.

Animate the effect Property for a Native Blur Transition

If you specifically want the blur intensity to ramp up and down, animate the effect property instead:

1import UIKit
2
3final class EffectBlurViewController: UIViewController {
4    private let blurView = UIVisualEffectView()
5    private let targetEffect = UIBlurEffect(style: .systemChromeMaterial)
6
7    override func viewDidLoad() {
8        super.viewDidLoad()
9
10        blurView.frame = view.bounds
11        blurView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
12        blurView.effect = nil
13        view.addSubview(blurView)
14    }
15
16    func blurIn() {
17        UIView.animate(withDuration: 0.35) {
18            self.blurView.effect = self.targetEffect
19        }
20    }
21
22    func blurOut() {
23        UIView.animate(withDuration: 0.35) {
24            self.blurView.effect = nil
25        }
26    }
27}

This is often the better answer when the question is really about UIBlurEffect, not just view visibility. The user sees the material appear, not merely a transparent layer becoming opaque.

Use UIViewPropertyAnimator for Interactive Blur

For drag gestures or interactive transitions, UIViewPropertyAnimator gives more control than a fixed UIView.animate block:

1import UIKit
2
3final class InteractiveBlurController {
4    let blurView = UIVisualEffectView()
5    private let targetEffect = UIBlurEffect(style: .systemThinMaterial)
6
7    lazy var animator: UIViewPropertyAnimator = {
8        let animator = UIViewPropertyAnimator(duration: 0.4, curve: .easeInOut) {
9            self.blurView.effect = self.targetEffect
10        }
11        animator.pausesOnCompletion = true
12        return animator
13    }()
14
15    func update(progress: CGFloat) {
16        animator.fractionComplete = progress
17    }
18}

This pattern is useful when a pan gesture should control how strong the blur looks as the interface moves.

Choose the Right Technique for the Job

Use alpha when you want a simple fade of the whole view. Use effect when you want the blur itself to animate in a way that matches other UIKit materials. In some interfaces, the best result is a combination: animate the blur material with effect and separately fade labels or buttons layered above it.

You should also create the blur view once and reuse it. Rebuilding the view hierarchy every time you animate usually creates more layout work and makes the code harder to maintain.

Common Pitfalls

One common mistake is expecting an alpha animation to look identical to animating effect. The visual result is different, so choose deliberately rather than treating the two APIs as interchangeable.

Another problem is starting the animation before the blur view has the right frame or constraints. If the view is not laid out yet, the blur may animate in the wrong place.

Interactive animations also need care. If you use UIViewPropertyAnimator, keep the animator alive long enough and update fractionComplete on the same instance instead of recreating it every gesture event.

Finally, remember that heavy blur over a complicated interface can be expensive. If performance is poor, profile the view hierarchy before blaming the animation code alone.

Summary

• Animate alpha when you want a quick fade of the entire blur view.
• Animate effect when you want the blur material itself to transition in or out.
• Use UIViewPropertyAnimator for gesture-driven or interactive blur changes.
• Lay out the blur view before animating it, and reuse the same view where possible.
• Pick the approach based on the visual result you actually want, not just on which API is shortest to type.