圆形中的渐变色

Question

我需要创建一个带有动画的圆形，已经创建成功，一切正常。我的问题是如何添加渐变颜色。请参考附加的屏幕截图。

以下是我创建带动画的圆形的代码：

      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")

    }

我的问题是在上面的代码中应该在哪里添加CAGradientLayer来添加渐变颜色。

以下代码行用于添加渐变颜色：

       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)

- Ashish Verma

---

你需要的是角度径向/圆形渐变。这里有一篇相关文章：https://dev59.com/fmAf5IYBdhLWcg3wbSQh - Andrej

Answer 1

如果您想要真正模拟渐变颜色，可以查看这个stackoverflow回答。它基于一个十字形将矩形视图分为4个部分，然后在每个部分上移动颜色，以获得应用于图层蒙版的规则渐变。

- Alessandro Ornano