1

I have a UIView with a blurEffect defined as follows :

 var blurEffect = UIBlurEffect(style: UIBlurEffectStyle.Light)

        let blurEffectView = UIVisualEffectView(effect: blurEffect)
        blurEffectView.frame = containerBar.bounds
        blurEffectView.autoresizingMask = [.FlexibleWidth, .FlexibleHeight]
        self.containerBar.insertSubview(blurEffectView, atIndex: 1) //if you have more UIViews, use an insertSubview API to place it where needed
        self.containerBar.sendSubviewToBack(blurEffectView)

This works fine and produces the following result (the blurred view is on top) :

enter image description here

What I want to achieve is to make the transition between the picture and the view more smooth, so that there is no clear line which divides the two, I am thinking of making the blurred view have a alpha gradient which starts at 1.0 on top and goes to 0.0 at the bottom of the blurred view (same idea as a color gradient). This would make the transition much more gradual and smooth, however I am not sure how to achieve this kind of alpha gradient.

I added the following code : 

            let gradientLayer = CAGradientLayer()
        gradientLayer.frame = containerBar.bounds;
        gradientLayer.colors =  [UIColor.whiteColor().CGColor, UIColor.clearColor().CGColor]
        gradientLayer.startPoint = CGPointMake(0.8, 1.0)
        gradientLayer.endPoint = CGPointMake(1.0, 1.0)
        blurEffectView.layer.mask = gradientLayer;

as suggested by the duplicate question, all this did was made the whole blurView disappear.

Alk
  • 5,215
  • 8
  • 47
  • 116
  • That doesn't deal with this issue at all, it's about a color gradient between transparent and white, completely not what I'm asking here – Alk Jul 08 '16 at 13:55
  • 1
    But that color gradient is set as a mask, so only the alpha channel gets used. So it's exactly what you are trying to do. Read the question and look at the provided images. – Putz1103 Jul 08 '16 at 14:14
  • @Putz1103 I tried applying that, it didn't work, check the edit – Alk Jul 08 '16 at 15:15
  • First off, that code is making a horzontal gradient. Second, change the `.mask` call to an `insertSubLayer` to see if it's actually getting placed where you think it is. If you do that and don't see a white gradient then your frames are not what you expect them to be. – Putz1103 Jul 08 '16 at 15:23
  • Yes I set the Y coordinate to 0.8 and 1.0 instead of the X, the same thing happened, the whole blur was gone. And yes, I see a white gradient if I do that – Alk Jul 08 '16 at 15:26
  • If you do see the gradient, then it's possible that the `UIVisualEffectView` does not allow gradient masks. I know it allows shape masks, but I can't find anywhere that anyone has asked for help with gradient masks with them. It might be easier at that point to put the blur in the background and fade out the top of the image so that it blends into the blur instead of the blur blending into it. – Putz1103 Jul 08 '16 at 15:31
  • I also tried adding it to the container view which hosts the visual effect view, however this resulted in none of the contents of the container view being visible, it became completely transparent – Alk Jul 08 '16 at 15:32

0 Answers0