Fill a CAShapeLayer with Gradient in swift?

Question

I have filled the circle boundary with CAShapeLayer.Now i am giving my CAShape color as red but i want to give it as a gradient color.Please tell me how can i do this?

circlePath = UIBezierPath(arcCenter: centerPoint, radius: circleRadius, startAngle: CGFloat(1.5 * M_PI), endAngle: CGFloat(-0.5 * M_PI), clockwise: false)


        //add gradient to the below
        progressCircle = CAShapeLayer ()
        progressCircle.path = circlePath?.cgPath
        progressCircle.strokeColor = UIColor.red.cgColor
        progressCircle.fillColor = UIColor.clear.cgColor
        progressCircle.lineWidth = 4.0
        progressCircle.strokeStart = 0
        progressCircle.strokeEnd = 0.7

        let gradient: CAGradientLayer = CAGradientLayer()
        let startingColorOfGradient = UIColor(colorLiteralRed: 50/255, green: 189/255, blue: 170/255, alpha: 1.0).cgColor
        let endingColorOFGradient = UIColor(colorLiteralRed: 133/255, green: 210/255, blue: 230/255, alpha: 1.0).cgColor
        gradient.startPoint = CGPoint(x: 1.0, y: 0.5)
        gradient.endPoint = CGPoint(x: 0.0, y: 0.5)
        gradient.colors = [startingColorOfGradient , endingColorOFGradient]

        circle.layer.addSublayer(progressCircle)
circle.layer.addSublayer(gradient)

Possible duplicate of [Applying a Gradient to CAShapeLayer](https://stackoverflow.com/questions/4733966/applying-a-gradient-to-cashapelayer) — Roy Falk, Nov 26 '17 at 14:49

score -1 · Answer 1 · answered Nov 15 '17 at 09:36

I think you're missing the gradient frame, the gradient locations and you should add it to the layer's mask. The following example works for me:

let gradient = CAGradientLayer()
gradient.startPoint = CGPoint(x: 1, y: 0.5)
gradient.endPoint = CGPoint(x: 0, y: 0.5)
gradient.frame = CGRect(x: 0, y: 0, width: yourWidth, height: yourHeight)
gradient.colors = [
    UIColor(white: 1, alpha: 0.1).cgColor,
    UIColor(white: 1, alpha: 0.5).cgColor,
    UIColor(white: 1, alpha: 0.9).cgColor
]
gradient.locations = [
    0.0,
    0.5,
    1.0
]
circle.layer.mask = gradient

Hope this helps!

If i use my color as red green then it does not show any effect.I provided it frame but it show only red color — TechChain, Nov 16 '17 at 04:13

Fill a CAShapeLayer with Gradient in swift?

1 Answers1