CODEWITHSUNDEEP
iosswiftuivisualeffectview
Bartek
Bartek

Reputation: 109

How can I add fade from top to visual effect view Blur - SWIFT

how can I add fade from top to visual effect view Blur? I want the top edge not visible.

Example:

Image

let blurEffect = UIBlurEffect(style: UIBlurEffect.Style.dark)
let blurEffectView = UIVisualEffectView(effect: blurEffect)
blurEffectView.frame = view.bounds
blurEffectView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
view.addSubview(blurEffectView)

Upvotes: 7

Views: 2293

Answers (2)

Fattie
Fattie

Reputation: 12631

how it's done:

class UpwardsBlurEdge: UIVisualEffectView {
    
    lazy var grad: CAGradientLayer = {
        let g = CAGradientLayer()
        g.colors = [
            UIColor.white.cgColor,
            UIColor.clear.cgColor
        ]
        g.startPoint = CGPoint(x: 0.5, y: 1)
        g.endPoint = CGPoint(x: 0.5, y: 0)
        layer.mask = g
        return g
    }()
    
    override func layoutSubviews() {
        super.layoutSubviews()
        grad.frame = bounds
    }
}

You can simply drop a UIVisualEffectView in on storyboard, and then change the class to that. Or just add it from code.

Upvotes: 1

TheCesco88
TheCesco88

Reputation: 141

This works for me

extension UIView{
    func createGradientBlur() {
        let gradientLayer = CAGradientLayer()
        gradientLayer.colors = [
        UIColor.white.withAlphaComponent(0).cgColor,
        UIColor.white.withAlphaComponent(1).cgColor]
        let viewEffect = UIBlurEffect(style: .light)
        let effectView = UIVisualEffectView(effect: viewEffect)
        effectView.frame = CGRect(x: self.bounds.origin.x, y: self.bounds.size.height, width: self.bounds.width, height: self.bounds.size.height)
        gradientLayer.frame = effectView.bounds
        gradientLayer.startPoint = CGPoint(x: 0.0, y: 0.0)
        gradientLayer.endPoint = CGPoint(x: 0.0 , y: 0.3)
        effectView.autoresizingMask = [.flexibleHeight]
        effectView.layer.mask = gradientLayer
        effectView.isUserInteractionEnabled = false //Use this to pass touches under this blur effect
        addSubview(effectView)

    }
}

How to use:

var myView = UIView()
myView.createGradientBlur()

Upvotes: 6

Related Questions