Circle中的渐变色

Circle中的渐变色

问题描述:

我必须创建一个带有动画的圆,我已经创建了它,并且一切正常。我的问题是添加渐变颜色。请参阅截屏附Circle中的渐变色

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) 
+3

你在找什么是角度径向/圆形渐变。这里有一篇文章处理这个问题:http://stackoverflow.com/questions/24657090/ios-circle-shaped-gradient – Andrej

this SO answer。它的基础上的十字架,除以矩形视图中4个部分,然后移动每个部分的颜色以获得应用于图层蒙版的规则梯度。