ios - 对 ShapeLayer 的描边应用渐变？

Question

我目前正在尝试实现一个带有动画笔划的圆圈 - 效果很好(见下图)。

一段时间以来，我一直在尝试为圆的笔触添加渐变。我正在使用一段我已经用来给 UITextField 添加下划线的代码。

如何将我的渐变代码应用到 shapeLayer 的描边？

圆圈:

let color = UIColor(red: 11/255, green: 95/255, blue: 244/255, alpha: 1)

let trackLayer = CAShapeLayer()
let center = CGPoint(x: circleView.frame.size.width/2, y: circleView.frame.size.height / 1.3)
let circularPath = UIBezierPath(arcCenter: center, radius: 120, startAngle: CGFloat.pi, endAngle: 2 * CGFloat.pi, clockwise: true)

trackLayer.path = circularPath.cgPath
trackLayer.strokeColor = UIColor.groupTableViewBackground.cgColor
trackLayer.lineWidth = 14
trackLayer.fillColor = UIColor.clear.cgColor

shapeLayer.path = circularPath.cgPath
shapeLayer.strokeColor = color.cgColor
shapeLayer.lineWidth = 15
shapeLayer.fillColor = UIColor.clear.cgColor
shapeLayer.strokeEnd = 0

circleView.layer.addSublayer(trackLayer)
circleView.layer.addSublayer(shapeLayer)

代码梯度:

let color = UIColor(red: 11/255, green: 95/255, blue: 244/255, alpha: 1).cgColor
let sndColor = UIColor(red: 124/255, green: 206/255, blue: 254/255, alpha: 1).cgColor

let gradient: CAGradientLayer = CAGradientLayer()
gradient.colors = [color, sndColor]
gradient.locations = [0.0, 0.8]
gradient.startPoint = CGPoint(x: 0, y: 0)
gradient.endPoint = CGPoint(x: 1, y: 0)
let width = CGFloat(3.0)
gradient.frame = CGRect(x: 0, y: self.frame.size.height - width, width:  self.frame.size.width, height: self.frame.size.height)

self.layer.insertSublayer(gradient, at: 0)
self.layer.masksToBounds = true

当前版本:

编辑:
我的笔触动画:

func animateStroke() {
        if !animated {
            animated = true

            let basicAnimation = CABasicAnimation(keyPath: "strokeEnd")
            var value: Double?

            if expectedCosts <= monthlyPrice {
                value = 1
            } else {
                value = monthlyPrice / expectedCosts
            }

            basicAnimation.toValue = value
            basicAnimation.duration = 1.5
            basicAnimation.fillMode = CAMediaTimingFillMode.forwards
            basicAnimation.isRemovedOnCompletion = false
            basicAnimation.timingFunction = CAMediaTimingFunction(name: CAMediaTimingFunctionName.easeInEaseOut)


            shapeLayer.add(basicAnimation, forKey: "strokeAnimation")

        }
    }

笔画代码:

func displayCircle() {
        let color = UIColor(red: 11/255, green: 95/255, blue: 244/255, alpha: 1)

        let trackLayer = CAShapeLayer()
        let center = CGPoint(x: circleView.frame.size.width/2, y: circleView.frame.size.height / 1.3)
        let circularPath = UIBezierPath(arcCenter: center, radius: 120, startAngle: CGFloat.pi, endAngle: 2 * CGFloat.pi, clockwise: true)

        trackLayer.path = circularPath.cgPath
        trackLayer.strokeColor = UIColor.groupTableViewBackground.cgColor
        trackLayer.lineWidth = 14
        trackLayer.fillColor = UIColor.clear.cgColor

        shapeLayer.path = circularPath.cgPath
        shapeLayer.strokeColor = color.cgColor
        shapeLayer.lineWidth = 15
        shapeLayer.fillColor = UIColor.clear.cgColor
        shapeLayer.strokeEnd = 0

        circleView.layer.addSublayer(trackLayer)
        circleView.layer.addSublayer(shapeLayer)

        let sndColor = UIColor(red: 124/255, green: 206/255, blue: 254/255, alpha: 1).cgColor

        let gradient: CAGradientLayer = CAGradientLayer()
        gradient.colors = [color, sndColor]
        gradient.locations = [0.0, 0.8]
        gradient.startPoint = CGPoint(x: 0, y: 0)
        gradient.endPoint = CGPoint(x: 1, y: 0)
        gradient.frame = circleView.bounds

        gradient.mask = trackLayer
        circleView.layer.addSublayer(gradient)
    }

Answer 1

    let color = UIColor(red: 11/255, green: 95/255, blue: 244/255, alpha: 1)
    let trackLayer = CAShapeLayer()
    let center = CGPoint(x: masterlayer.frame.size.width/2, y: masterlayer.frame.size.height / 1.3)
    let circularPath = UIBezierPath(arcCenter: center, radius: 120, startAngle: CGFloat.pi, endAngle: 2 * CGFloat.pi, clockwise: true)

    trackLayer.path = circularPath.cgPath
    trackLayer.strokeColor = UIColor.red.cgColor
    trackLayer.lineWidth = 14
    trackLayer.fillColor = UIColor.clear.cgColor

    trackLayer.strokeEnd = 0
    let animation = CABasicAnimation(keyPath: "strokeEnd")
    animation.duration = 3
    animation.fromValue = 0
    animation.toValue = 1
    animation.beginTime =  0.00001
    animation.fillMode = CAMediaTimingFillMode.forwards
    animation.isRemovedOnCompletion = false
    trackLayer.add(animation, forKey: "strokeEnd" + "\(index)")


    let color1 = UIColor(red: 11/255, green: 95/255, blue: 24/255, alpha: 1).cgColor
    let sndColor = UIColor(red: 124/255, green: 206/255, blue: 254/255, alpha: 1).cgColor
    let gradient: CAGradientLayer = CAGradientLayer()
    gradient.colors = [color1, sndColor]
    gradient.locations = [0.0, 0.8]
    gradient.startPoint = CGPoint(x: 0, y: 0)
    gradient.endPoint = CGPoint(x: 1, y: 0)
    let width = CGFloat(3.0)
    gradient.frame = masterlayer.bounds

    gradient.mask = trackLayer
    circleView.layer.addSublayer(gradient)

解决你问题的工作代码

在circleView.layer上添加渐变，并将跟踪层设置为渐变的 mask 层