CODEWITHSUNDEEP
ioscore-animationcagradientlayer
rpstw
rpstw

Reputation: 1712

Weird gradient when using CAGradientLayer with radial gradient.

Using code:

class ViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        let v = View()
        view.addSubview(v)
        v.frame = CGRect(x: 100, y: 100, width: 200, height: 200)
    }
}

class View : UIView {
    let gradientLayer = CAGradientLayer()
    override init(frame: CGRect) {
        super.init(frame: frame)
        self.backgroundColor = .blue

        gradientLayer.frame = CGRect(x: 0, y: 0, width: 200, height: 200)
        gradientLayer.startPoint = CGPoint(x: 0, y: 0.5)
        gradientLayer.endPoint = CGPoint(x: 1, y: 0.5)
        gradientLayer.type = .radial
        gradientLayer.colors = [
            UIColor.red.cgColor,
            UIColor.green.cgColor
        ]
        self.layer.addSublayer(gradientLayer)
    }
    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
    }
}

expect(generated by Sketch): enter image description here

code result on a iOS 12 simulator: enter image description here

code result on a real iOS device: enter image description here

My Xcode version is 10.0 (10A255), I found the problem occurs only when startPoint.x == endPoint.x || startPoint.y == endPoint.y

Upvotes: 0

Views: 713

Answers (1)

Tiny
Tiny

Reputation: 56

When the y of startPoint and endPoint are equal, that means the height of the gradient ellipse will be 0.

In your code snippet, you can set entPoint's y to 1 to achieve the Sketch effect.

In the QuartzCore framework, there are the following comments:

/* Radial gradient. The gradient is defined as an ellipse with its * center at 'startPoint' and its width and height defined by * '(endPoint.x - startPoint.x) * 2' and '(endPoint.y - startPoint.y) * * 2' respectively. */

@available(iOS 3.2, *)

public static let radial: CAGradientLayerType

Upvotes: 2

Related Questions