Adding an animatable blur to a view while keeping the background dynamic

Question

I'm trying to implement a custom blur view where the blur radius can be animated, and the blur view can stack blending modes (CGBlendingMode or a CIFilter), all while preserving any animations/actions occurring in the background.

I tried UIVisualEffectView first, but the radius cannot be animated without accessing private APIs which would most likely lead to an app rejection.

The problem with taking a snapshot and applying the effects is that the view is static, and any movement in the background is covered up by the blur view.

I also took a look at FlexMonkey's Blurable, but I had similar results as the snapshot.

Any guidance would be really helpful. Cheers

Edit: I added a gif to demonstrate what I'm trying to make. The red view moving left to right blurs and multiplies the content below it, while showing the animation occurring on the red/blue square behind it.

I might suggest trying `UIViewEffectView`, animating the alpha. It's not the same as animating the radius, but yields a decent effect (assuming your intent is to just transition from unblurred to blurred). — Rob, Sep 23 '17 at 18:46
I tried that at first but reducing the alpha made the background look foggy instead of blurred. Ideally I would like to recreate UIVisualEffectView with control over blur radius and blending modes. — elfanek, Sep 23 '17 at 18:56

score 1 · Accepted Answer · edited May 07 '18 at 01:32

Blend modes are extremely tricky and I'm not sure it's possible to apply them to a live UIView (GPUImage might help here) but animating the blur radius (between 0 and UIVisualEffectView's full blur) is possible via this method:

You can animate from a nil effect to an effect like UIBlurEffectStyleDark so if we add an animation and then pause the layer's animations we can control the progress of the effect by adjusting the layer's timeOffset!

- (void) setupBlur {
    // Setup the blur to start with no effect
    self.blurredEffectView = [[UIVisualEffectView alloc] initWithEffect:nil];

    // Add animation to desired blur effect
    [UIView animateWithDuration:1.0 animations:^{
        [self.blurredEffectView setEffect:[UIBlurEffect effectWithStyle:UIBlurEffectStyleDark]];
    }];

    // Pause layer animations
    self.blurredEffectView.layer.speed = 0;
}

Adjust blur between 0.0 and 1.0 (animation duration):

- (void) adjustBlur:(CGFloat)blurIntensity {
    self.blurredEffectView.layer.timeOffset = blurIntensity;
}

Note: this won't work on iOS 8 where UIBlurEffect animations aren't supported.

Adding an animatable blur to a view while keeping the background dynamic

1 Answers1