iOS 圆形渐变

Question

我有一个任务，需要绘制一个带有圆形渐变的线（颜色应该随着圆形改变），然后添加动画效果。现在我使用一定的间隔和不同的颜色来绘制360个图层。

var colours: [UIColor] = [UIColor]()
var startAngle = CGFloat(-0.5 * Double.pi)
var index = 0

func drawLayers() {
    let smallAngle = (1.5 * CGFloat.pi - (-0.5 * CGFloat.pi)) / 360

    if index < colours.count { //colours.count = 360
        let endAngle = startAngle + smallAngle
        let circlePath = UIBezierPath(arcCenter: .init(x: 100, y: 100), radius: 100, startAngle: startAngle, endAngle: endAngle, clockwise: true)
        startAngle = endAngle
        let shapeLayer = CAShapeLayer()
        shapeLayer.path = circlePath.cgPath

        shapeLayer.fillColor = UIColor.clear.cgColor
        shapeLayer.strokeColor = colours[index].cgColor
        shapeLayer.lineWidth = 8

        view.layer.addSublayer(shapeLayer)

        index += 1

        Timer.scheduledTimer(
            withTimeInterval: 0.004,
            repeats: false) { (_) in
                self.drawLayers()
        }
    }
}

类似这样但带有线性动画效果

请问有人知道如何正确实现吗？

- Dima Paliychuk

---

@Rob 360层并不算“好的”。 - matt

iOS现在内置了圆形（锥形）渐变。因此，我只需要请求一次渐变，然后将其用作蒙版的单个路径进行动画处理。这只涉及两个图层，工作量更少，而且是真正的渐变。 - matt

顺便说一下，你的小角度可以简化为(2 * CGFloat.pi) / 360（或2度）。 - Sulthan

Answer 1

现在iOS内置了环形（锥形）渐变。所以我只需要请求一次渐变，然后将一个单独的路径用作掩模进行动画处理。这只涉及两个图层，工作量更少，可以实现真正的动画和渐变效果。

示例：

这是我的测试代码，根据需要更改颜色和数字：

    let grad = CAGradientLayer()
    grad.type = .conic
    grad.colors = [UIColor.red.cgColor, UIColor.green.cgColor, UIColor.red.cgColor]
    grad.startPoint = CGPoint(x: 0.5, y: 0.5)
    grad.frame = CGRect(x: 100, y: 100, width: 200, height: 200)
    self.view.layer.addSublayer(grad)
    let c = CAShapeLayer()
    let p = UIBezierPath(ovalIn: CGRect(x: 20, y: 20, width: 160, height: 160))
    c.path = p.cgPath
    c.fillColor = UIColor.clear.cgColor
    c.strokeColor = UIColor.black.cgColor
    c.lineWidth = 8
    grad.mask = c
    c.strokeEnd = 0

要实现动画效果，只需说：

    c.strokeEnd = 1

- matt

---

谢谢您的回答，但这不是我要找的。颜色应该随着圆形的变化而改变。 - Dima Paliychuk

@DimaPaliychuk 只是顺便说一下，（A）如果你想在圆圈中使用“更多颜色”（你的示例有七种颜色），只需在此处的第三行代码中添加更多即可。 （B）如果您希望颜色渐变随着动画的增长而“拉伸”，最简单的方法是熟悉.locations属性（基本上将其压缩-只需将.locations中的每个数字乘以当前分数即可）。 - Fattie