UIVisualEffects Zach McArtor

Affect vs Effect

❖ Affect - verb. ‘A’ for action.!

❖ Effect - noun.

What is UIVisualEffects ?

❖ New classes introduced in iOS8 which make the creation of translucent, blurred views easier*

*May not be faster

Pre-iOS8 Ways

❖ Before iOS8, blurred views were created with drawViewHierarchyInRect:afterScreenUpdates API and UImage+ImageEffects.!

❖ This method is still faster then UIVisualEffects and does not need render time on the GPU. !

❖ However, it was limited to ‘static’ blurred views.

What’s so special about UIVisualEffects?

❖ Blurred overlays can be created which reflect changing content underneath!!

❖ Blurred background + text is part of the iOS7 visual design language. VibrantEffects makes this amazing.

Core Classes

❖ UIVisualEffectView - the ‘holder view’ of an effect. Can be initialized with either a blur or vibrant view.!

❖ (UIVisualEffect) - UIBlurEffect, UIVibrancyEffect. Configure the type of blur or vibrancy

Customization

❖ Presently, there are three flavors of ‘blur’!

❖ blurs can be tinted by applying backgroundColor to UIVisualEffectsView contentView.

Vibrancy

❖ Vibrancy is necessary if text will placed on top of the blurred view. Vibrancy greatly improves readability of text by boosted saturation based on chosen blur effect.!

❖ Text looks amazing. It’s magical.

UIVisualEffects Blur

//visualEffectsView configured for BLUR UIBlurEffect *blur = [UIBlurEffect effectWithStyle:UIBlurEffectStyleDark] ! UIVisualEffectView *blurView = [[UIVisualEffectView alloc] initWithEffect:blur]; ! blurView.frame = someFrame; [self.view addSubview:blurView];

Blur + Vibrancy

UIVisualEffectView *vibrantView = [[UIVisualEffectView alloc] initWithEffect:[UIVibrancyEffect effectForBlurEffect:blur]]; !vibrantView.frame = blurView.bounds; !// add vibrantView to first blurView [blurView.contentView addSubview:vibrantView];

Caveats

❖ Blur makes the details in the background unimportant. Changing alpha on a blurred view causes blur to fail.!

!

❖ Avoid placing UIVisualEffectView in a view hierarchy that contains masks.

Demo Time

Thanks for listening!