Circle中的渐变色
问题描述:
我必须创建一个带有动画的圆,我已经创建了它,并且一切正常。我的问题是添加渐变颜色。请参阅截屏附Circle中的渐变色
以下是我与动画制作圈代码:
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)
你在找什么是角度径向/圆形渐变。这里有一篇文章处理这个问题:http://stackoverflow.com/questions/24657090/ios-circle-shaped-gradient – Andrej