圆圈中的渐变色

时间:2016-06-11 07:56:42

标签: ios swift swift2 gradient

我必须创建一个带动画的圆圈,我已创建它,一切正常。我的问题是添加渐变色。请参考随附的截图

Circle with gradient color

下面是我创建带动画的圆圈的代码:

      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)

1 个答案:

答案 0 :(得分:1)

如果你想要真实模拟渐变色,你可以检查this SO answer。它基于一个十字形,它将你的矩形视图分成4个部分,然后移动每个部分的颜色以获得应用于图层蒙版。