效果图如下:
demo.png
示例mask.png
思路如下:
1.创建两个线性渐变. 一个正 一个旋转180°
2.创建mask环形图层
总结:找到需要递进的颜色,环绕着,像接龙一样用线性渐变实现.
strokColor = UIColor.gray
//MARK: - set you need startAngle endAngle 设置你的开始点 结束点
let path = UIBezierPath(arcCenter: CGPoint(x:bounds.width/2,y:bounds.height/2), radius: 90, startAngle: degreesToRadians(angle: -240), endAngle: degreesToRadians(angle: 60), clockwise: true)
//track 层
trackLayer = CAShapeLayer()
trackLayer.frame = bounds
self.layer.addSublayer(trackLayer)
trackLayer.fillColor = UIColor.clear.cgColor
trackLayer.strokeColor = strokColor.cgColor
trackLayer.opacity = 0.2
trackLayer.lineCap = kCALineCapSquare
trackLayer.lineWidth = 15
trackLayer.path = path.cgPath
//mask 层
progressLayer = CAShapeLayer()
progressLayer.frame = bounds
progressLayer.fillColor = UIColor.clear.cgColor
progressLayer.strokeColor = UIColor.cyan.cgColor
progressLayer.lineCap = kCALineCapSquare
progressLayer.lineWidth = 15
progressLayer.strokeEnd = 0.0
progressLayer.path = path.cgPath
let gradientLayer = CALayer()
//MARK: - leftGradientLayer 左边渐变层
let leftGradientLayer = CAGradientLayer()
leftGradientLayer.frame = CGRect(x: 0, y: 0, width: bounds.width/2, height: bounds.height)
leftGradientLayer.colors = [UIColor(red: 62/255.0, green: 154/255.0, blue: 205/255.0, alpha: 0.01).cgColor,UIColor(red: 62/255.0, green: 154/255.0, blue: 205/255.0, alpha: 0.5).cgColor]
leftGradientLayer.locations = [0.4,1];
leftGradientLayer.startPoint = CGPoint(x: 0.5, y: 1)
leftGradientLayer.endPoint = CGPoint(x: 0.5, y: 0)
gradientLayer.addSublayer(leftGradientLayer)
//MARK: - rightGradientLayer 右边渐变层
let rightGradientLayer = CAGradientLayer()
rightGradientLayer.frame = CGRect(x: bounds.width/2, y: 0, width: bounds.width/2, height: bounds.height)
rightGradientLayer.colors = [UIColor(red: 62/255.0, green: 154/255.0, blue: 205/255.0, alpha: 0.5).cgColor, UIColor(red: 62/255.0, green: 154/255.0, blue: 205/255.0, alpha: 1).cgColor]
rightGradientLayer.locations = [0.2,1];
rightGradientLayer.startPoint = CGPoint(x: 0.5, y: 0)
rightGradientLayer.endPoint = CGPoint(x: 0.5, y: 1)
gradientLayer.addSublayer(rightGradientLayer)
gradientLayer.mask = progressLayer
self.layer.addSublayer(gradientLayer)
