UIVisualEffectView in iOS 10

Question

I am presenting a UIViewController that contains a UIVisualEffectView as follows:

-(void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath {
    [self performSegueWithIdentifier:@"segueBlur" sender:nil];
}

-(void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender {
    if([segue.identifier isEqualToString:@"segueBlur"]) {
        ((UIViewController *)segue.destinationViewController).providesPresentationContextTransitionStyle = YES;
        ((UIViewController *)segue.destinationViewController).definesPresentationContext = YES;
        ((UIViewController *)segue.destinationViewController).modalPresentationStyle = UIModalPresentationOverFullScreen;
    }
}

As you can see, I'm using the UIModalPresentationStyleOverFullScreen so that when the view controller with blur appears, the blur will be 'applied' to the content of the view controller that is presenting it; the segue has a Cross Dissolve transition style.

The effect looks as expected. However, in iOS 9 the presentation is smoother than in iOS 10. In iOS 10 when the view controller appears it seems like a 2-step animation, while in iOS 9 the blur is applied immediately.

A picture is worth a thousand words so I uploaded a video showing this strange behavior:

UIVisualEffectView iOS 9 vs iOS 10

My question is: How can I present the view controller in iOS 10 as it is presented in iOS 9?

Answer 1

iOS 10 has changed the way UIVisualEffectView works, and it has broken many use cases which were not strictly speaking "legal", but worked before. Sticking to documentation, you should not be fading in UIVisualEffectView, which is what happens when you use UIModalTransitionStyleCrossDissolve. It seems now broken on iOS 10, along with masking of visual effect views, and others.

In your case, I would suggest an easy fix which will also create a better effect than before, and is supported on both iOS 9 and 10. Create a custom presentation and instead of fading the view in, animate the effect property from nil to the blur effect. You can fade in the rest of your view hierarchy if needed. This will neatly animate the blur radius similar to how it looks when you pull the home screen icons down.

Answer 2

    UIView.animate(withDuration: 0.5) {
        self.effectView.effect = UIBlurEffect(style: .light)
    }

Tested on both iOS9 and 10. Works fine for me

Answer 3

Code below blur parent view controller when ViewController presented. Tested on both iOS9 and 10.

@interface ViewController () <UIViewControllerTransitioningDelegate, UIViewControllerAnimatedTransitioning>

@property (nonatomic) UIVisualEffectView *blurView;

@end


@implementation ViewController

- (instancetype)init
{
    self = [super init];
    if (!self)
        return nil;

    self.modalPresentationStyle = UIModalPresentationOverCurrentContext;
    self.modalTransitionStyle = UIModalTransitionStyleCrossDissolve;
    self.transitioningDelegate = self;

    return self;
}

- (void)viewDidLoad
{
    [super viewDidLoad];

    self.view.backgroundColor = [UIColor clearColor];
    self.blurView = [UIVisualEffectView new];
    [self.view addSubview:self.blurView];
    self.blurView.frame = self.view.bounds;
}

- (id <UIViewControllerAnimatedTransitioning>)animationControllerForPresentedController:(UIViewController *)presented
                                                                       presentingController:(UIViewController *)presenting
                                                                   sourceController:(UIViewController *)source
{
    return self;
}

-(NSTimeInterval)transitionDuration:(id<UIViewControllerContextTransitioning>)transitionContext
{
    return 0.3;
}

-(void)animateTransition:(id<UIViewControllerContextTransitioning>)transitionContext
{
    UIView *container = [transitionContext containerView];

    [container addSubview:self.view];

    self.blurView.effect = nil;

    [UIView animateWithDuration:0.3 animations:^{
        self.blurView.effect = [UIBlurEffect effectWithStyle:UIBlurEffectStyleDark];
    } completion:^(BOOL finished) {
        [transitionContext completeTransition:finished];
    }];
}

@end