Gradient color in Circle

Question

I have to create a circle with animation, I have created it and everything is working fine. My problem is to add gradient color. Please refer screen shot attached

Below is my code for creating circle with animation:

      let lineWidth: CGFloat = 20

      dispatch_async(dispatch_get_main_queue()) { () -> Void in

        let startAngle = -90.0
        let endAngle = -90.01

        let circlePath = UIBezierPath(arcCenter: CGPoint(x: self.frame.width/2,y: self.frame.height/2), radius: CGFloat(self.frame.width/2 - (self.lineWidth/2)), startAngle: CGFloat(((startAngle) / 180.0 * M_PI)), endAngle:CGFloat(((endAngle) / 180.0 * M_PI)), clockwise: true)

        // Circle layer
        let circleLayer = CAShapeLayer()
        circleLayer.path = circlePath.CGPath
        circleLayer.fillColor = UIColor.clearColor().CGColor
        circleLayer.strokeColor = UIColor.greenColor().CGColor
        circleLayer.strokeEnd = 94/100
        circleLayer.lineWidth = self.lineWidth
        circleLayer.zPosition = 1

        // Background circle layer
        let circleBackgroundLayer = CAShapeLayer()
        circleBackgroundLayer.path = circlePath.CGPath
        circleBackgroundLayer.fillColor = UIColor.clearColor().CGColor
        circleBackgroundLayer.strokeColor = UIColor.lightgrayColor().CGColor
        circleBackgroundLayer.strokeEnd = 1.0
        circleBackgroundLayer.lineWidth = self.lineWidth
        circleBackgroundLayer.zPosition = -1

        self.layer.addSublayer(circleLayer)
        self.layer.addSublayer(circleBackgroundLayer)

        // Add Animation
        let pathAnimation = CABasicAnimation(keyPath: "strokeEnd")
        pathAnimation.duration = 0.55
        pathAnimation.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionLinear)
        pathAnimation.fromValue = 0
        pathAnimation.toValue = 94/100

        circleLayer.addAnimation(pathAnimation, forKey: "strokeEnd")

    }

My question is in the above code where should I add CAGradientLayer to add gradient color.

The below lines of code is to add gradient color:

       let gradient: CAGradientLayer = CAGradientLayer()
        gradient.frame = CGRectMake(0, 0, 170, 170)
        gradient.colors = [UIColor(hexString: "#27C68A")().CGColor, UIColor(hexString: "#86EA26")().CGColor]
        gradient.cornerRadius = gradient.frame.width/2
        gradient.startPoint = CGPoint(x: 0,y: 1)
        gradient.endPoint = CGPoint(x: 1, y: 0)
        self.layer.insertSublayer(gradient, atIndex: 0)

What you're looking for is angle radial / circular gradient. Here's an article dealing with that: http://stackoverflow.com/questions/24657090/ios-circle-shaped-gradient — Andrej, Jun 11 '16 at 08:17

score 1 · Answer 1 · edited May 23 '17 at 12:24

1

If you want a real simulation of gradient color you can check this SO answer .It's based on a cross that divided your rectangular view in 4 portions, then shift the colors on each portion to obtain a regular gradient applied to the layer mask.

edited May 23 '17 at 12:24

Community

1
1

answered Jun 11 '16 at 09:28

Alessandro Ornano

34,887
11
106
133

Gradient color in Circle

1 Answers1