CODEWITHSUNDEEP
iosobjective-c
Andy
Andy

Reputation: 770

Creating a dynamic blur effect over an image

I'm trying to create a blur effect with a view, where a view creates a blur of the image behind it. However, I need the blur to be dynamic to the user's scrolling. This is how how it would look. enter image description here

The solid black rectangle background behind the white text is what I am trying to get blurred with the correct bounds of the image behind it. Also, the user is able to scroll the view up and down, and the picture stays static. Is this possible? How is this done?

This is how I am currently attempting to blur the background with no luck. 

 UIVisualEffect *blurEffect;
        blurEffect = [UIBlurEffect effectWithStyle:UIBlurEffectStyleDark];
        UIVisualEffectView *visualEffectView;
        visualEffectView = [[UIVisualEffectView alloc] initWithEffect:blurEffect];
        visualEffectView.frame = header.artistBackgroundView.bounds;
        [header.artistBackgroundView addSubview:visualEffectView];

The header.artistBackgroundView is the black rectangle.

Upvotes: 0

Views: 781

Answers (2)

Chase
Chase

Reputation: 2304

Assuming you're using the new blur effect in iOS 8

Ok so this is how the blur effect needs to work: The background colors between the blur effect and the image need to be clearColor or have some transparency -- note: do not change the alpha on the view itself, just the background color. Also the blur effect must be behind anything you want on top of it so you'll need to do something like this: 

[header.artistBackgroundView sendSubviewToBack:visualEffectView];

Remember the effect only blurs the stuff that would otherwise sit directly behind it... this is why you need to make sure that every view between the effect and the image is transparent. Any semi-transparent backgrounds will add a nice tint to the blur effect.

Upvotes: 1

Duncan C
Duncan C

Reputation: 131398

You probably want the new UIVisualEffectView which was added in iOS 8.0.

That lets you create a view that allows a blurred version of whatever is underneath it to show through - either other content in your app, or content of the springboard (the iOS desktop) underneath your app.

I've used NSVisualEffectView objects in Mac OS, but haven't had occasion to use the iOS equivalent yet.

I suggest taking a look at the docs on UIVisualEffectView.

If you don't use a UIVisualEffectView, you'd have to take a snapshot of the view underneath, use a Core Image filter to create a blurred version, and then apply that as a background through some custom code. That's doable, but more work than the ready-made UIVisualEffectView class.

Upvotes: 2

Related Questions