Vibrancy without Blur?

In the Patform State of The Union, towards the end, we were shown a screenshot about new Visual Effects. In there they showed a text label on top of an image, which seems to have vibramcy wihout blur effect.


I've been waiting for them to do vibrancy effect WITHOUT blur underneath it.


Is this available in iOS9? Coming up on next betas?

I am 99% sure that you cannot apply a vibrancy effect without a blur effect. Also, the vibrancy effect relies on the blur to maintain it's complete legibility. Mabye if you could give an exact time where you thought you saw this in the Platforms State of the Union, I could check it out. I watched the session for Visual Effects and they used the blur effect to get their vibrancy effect.

Technically there is no reason you cannot use a vibrancy effect without a blur effect, its just that the design of the vibrancy filters are intended to be used with a blur. If you can find a way to make vibrancy look good without blur, feel free to knock yourself out.

For instance, on a video screen, on a photo editing screen, on a camera preview window, where the underlaying content change in color and brightness, you just want to display a label? I thought that would be very handy that way. Also, there is no way I can do vibrancy effect without blur correct?

Platforms State of the Union (2015) 1:14:33 mark.

I looked at the video, and it does look like they are applying vibrancy without a blur effect. However, I have not heard anything about this. I will look around and try to find something that talks about this.

It COULD be a part of NSAppearance exclusive to Mac OS.

I contacted an evangelist at Apple, and he replied


"A UIBlurEffect is not a requirement for using a UIVibrancyEffect. However, we recommend using one for the purposes of design; this is what our UI designers have determined to be a pleasing interface."


So I hope this answers your question.

Actually you can do it since iOS 8 introduced UIVisualEffectView...


let vibrancyBlurView = UIVisualEffectView(effect: UIVibrancyEffect(forBlurEffect: UIBlurEffect(style: .Light)))
vibrancyBlurView.frame = view.frame

view.addSubview(vibrancyBlurView)

let label = UILabel()
label.text = "Vibrancy Text"
label.sizeToFit()

vibrancyBlurView.contentView.addSubview(label)

I took 15 minutes to try and figure this out, and the way I found was this:

let image = UIImage(named: "cliff")
       
        let imageView = UIImageView(frame: view.bounds)
        imageView.contentMode = .ScaleAspectFill
        imageView.image = image
       
        view.addSubview(imageView)
       
        let label = UILabel(frame: CGRect(x: 0, y: 0, width: view.frame.width, height: view.frame.height/2))
        label.text = "Hello, world"
        label.font = UIFont.systemFontOfSize(42.0, weight: 6.0)
        label.textAlignment = .Center
        label.center = CGPoint(x: view.frame.width/2, y: view.frame.height-36.0)
        label.textColor = UIColor.darkTextColor()
        view.addSubview(label)
       
        let blurView = UIVisualEffectView(effect: UIBlurEffect(style: .Dark))
        blurView.frame = view.bounds
        blurView.layer.masksToBounds = true
        blurView.layer.mask = label.layer
       
        view.addSubview(blurView)
       
        let vibrancyView = UIVisualEffectView(effect: UIVibrancyEffect(forBlurEffect: UIBlurEffect(style: .Dark)))
        vibrancyView.frame = view.bounds
        blurView.contentView.addSubview(vibrancyView)
       
        let label2 = UILabel(frame: CGRect(x: 0, y: 0, width: view.frame.width, height: view.frame.height/2))
        label2.text = "Hello, world"
        label2.font = UIFont.systemFontOfSize(42.0, weight: 6.0)
        label2.textAlignment = .Center
        label2.center = CGPoint(x: view.frame.width/2, y: view.frame.height-36.0)
        label2.textColor = UIColor.darkTextColor()
        view.addSubview(label2)
       
        vibrancyView.contentView.addSubview(label2)


I just made it real quick in a playground so it's not very pretty. However, a mask is required.

The masking you've done isn't really that useful, since it is likely breaking the blur effect given the way you've applied it. You could probably get a very similar effect if you just used the vibrancy effect view with label2.


Also you don't need both masksToBounds and mask – and they are equivalent to UIView's clipsToBounds and maskView properties, which you should prefer when working with UIView. In the case of UIVisualEffectView, the maskView property is important because UIVisualEffectView ensures that masks work properly without breaking your effect. Using layer.mask instead will usually break the effect (the blur in particular).


Effectively, what Jony did should do the trick, although may not look identical. If it looks how you want it, enjoy.

Does that work for a video background?


That's the main issue I am having. Imagine a video app, I just want the UI Elements and text to lay without containers. However ever-changing background brightness and color makes it difficult to make them visible all times.

Vibrancy without Blur?
 
 
Q