ui visual effects - boulder ios october 2014
DESCRIPTION
Overview of UIVisualEffects new in iOS 8 Presented at Boulder iOS Meetup, October 2014TRANSCRIPT
![Page 1: UI Visual Effects - Boulder iOS October 2014](https://reader033.vdocuments.net/reader033/viewer/2022052907/558e72351a28ab6c638b47b6/html5/thumbnails/1.jpg)
UIVisualEffects Zach McArtor
![Page 2: UI Visual Effects - Boulder iOS October 2014](https://reader033.vdocuments.net/reader033/viewer/2022052907/558e72351a28ab6c638b47b6/html5/thumbnails/2.jpg)
Affect vs Effect
❖ Affect - verb. ‘A’ for action.!
❖ Effect - noun.
![Page 3: UI Visual Effects - Boulder iOS October 2014](https://reader033.vdocuments.net/reader033/viewer/2022052907/558e72351a28ab6c638b47b6/html5/thumbnails/3.jpg)
What is UIVisualEffects ?
❖ New classes introduced in iOS8 which make the creation of translucent, blurred views easier*
*May not be faster
![Page 4: UI Visual Effects - Boulder iOS October 2014](https://reader033.vdocuments.net/reader033/viewer/2022052907/558e72351a28ab6c638b47b6/html5/thumbnails/4.jpg)
![Page 5: UI Visual Effects - Boulder iOS October 2014](https://reader033.vdocuments.net/reader033/viewer/2022052907/558e72351a28ab6c638b47b6/html5/thumbnails/5.jpg)
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.
![Page 6: UI Visual Effects - Boulder iOS October 2014](https://reader033.vdocuments.net/reader033/viewer/2022052907/558e72351a28ab6c638b47b6/html5/thumbnails/6.jpg)
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.
![Page 7: UI Visual Effects - Boulder iOS October 2014](https://reader033.vdocuments.net/reader033/viewer/2022052907/558e72351a28ab6c638b47b6/html5/thumbnails/7.jpg)
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
![Page 8: UI Visual Effects - Boulder iOS October 2014](https://reader033.vdocuments.net/reader033/viewer/2022052907/558e72351a28ab6c638b47b6/html5/thumbnails/8.jpg)
Customization
❖ Presently, there are three flavors of ‘blur’!
❖ blurs can be tinted by applying backgroundColor to UIVisualEffectsView contentView.
![Page 9: UI Visual Effects - Boulder iOS October 2014](https://reader033.vdocuments.net/reader033/viewer/2022052907/558e72351a28ab6c638b47b6/html5/thumbnails/9.jpg)
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.
![Page 10: UI Visual Effects - Boulder iOS October 2014](https://reader033.vdocuments.net/reader033/viewer/2022052907/558e72351a28ab6c638b47b6/html5/thumbnails/10.jpg)
UIVisualEffects Blur
//visualEffectsView configured for BLUR UIBlurEffect *blur = [UIBlurEffect effectWithStyle:UIBlurEffectStyleDark] ! UIVisualEffectView *blurView = [[UIVisualEffectView alloc] initWithEffect:blur]; ! blurView.frame = someFrame; [self.view addSubview:blurView];
![Page 11: UI Visual Effects - Boulder iOS October 2014](https://reader033.vdocuments.net/reader033/viewer/2022052907/558e72351a28ab6c638b47b6/html5/thumbnails/11.jpg)
Blur + Vibrancy
UIVisualEffectView *vibrantView = [[UIVisualEffectView alloc] initWithEffect:[UIVibrancyEffect effectForBlurEffect:blur]]; !vibrantView.frame = blurView.bounds; !// add vibrantView to first blurView [blurView.contentView addSubview:vibrantView];
![Page 12: UI Visual Effects - Boulder iOS October 2014](https://reader033.vdocuments.net/reader033/viewer/2022052907/558e72351a28ab6c638b47b6/html5/thumbnails/12.jpg)
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.
![Page 13: UI Visual Effects - Boulder iOS October 2014](https://reader033.vdocuments.net/reader033/viewer/2022052907/558e72351a28ab6c638b47b6/html5/thumbnails/13.jpg)
Demo Time
![Page 14: UI Visual Effects - Boulder iOS October 2014](https://reader033.vdocuments.net/reader033/viewer/2022052907/558e72351a28ab6c638b47b6/html5/thumbnails/14.jpg)
Thanks for listening!