ios - 如何在 ios 中绘制具有多种颜色的动画路径？

Question

我需要在我的 iOS 应用程序中绘制类似于下图的内容，除了圆弧可能包含更多颜色:

我知道如何绘制它，但我正在寻找一种方法来为路径的绘制设置动画。

有个类似的问题here , 除了圆不是动画。 This是另一个问题，它解释了如何为圆圈制作动画，在我的例子中它工作正常，除了它不处理路径中的多种颜色。

如何做到这一点？

Answer 1

我找到了一个非常有效的通用解决方案。由于无法绘制不同颜色的独特路径，因此我只绘制了所有不同颜色的路径，没有动画，这些路径构成了我想要的路径。之后，我在相反方向绘制了一条覆盖所有这些路径的独特路径，并对这条路径应用了动画。

例如，在上面的例子中，我用下面的代码绘制了两条弧线:

class CircleView: UIView {

    let borderWidth: CGFloat = 20

    let startAngle = CGFloat(Double.pi)
    let middleAngle = CGFloat(Double.pi + Double.pi / 2)
    let endAngle = CGFloat(2 * Double.pi)
    var primaryColor = UIColor.red
    var secondaryColor = UIColor.blue
    var currentStrokeValue = CGFloat(0)

    override func draw(_ rect: CGRect) {
        let center = CGPoint(x: self.frame.width / 2, y: self.frame.height / 2)
        let radius = CGFloat(self.frame.width / 2 - borderWidth)
        let path1 = UIBezierPath(arcCenter: center, radius: radius, startAngle: startAngle, endAngle: middleAngle, clockwise: true)
        let path2 = UIBezierPath(arcCenter: center, radius: radius, startAngle: middleAngle, endAngle: endAngle, clockwise: true)
        path1.lineWidth = borderWidth
        primaryColor.setStroke()
        path1.stroke()
        path2.lineWidth = borderWidth
        secondaryColor.setStroke()
        path2.stroke()
    }
}

之后，我得到路径 path3，然后我将它添加到将添加到 View 的层:

var path3 = UIBezierPath(arcCenter: center, radius: radius, startAngle: endAngle, endAngle: startAngle, clockwise: true)

注意在这条路径中，它以相反的顺序覆盖了前两条路径，因为它的startAngle等于endAngle的值，所以它的endAngle等于startAngle并且 clockwise 属性设置为 true。这条路径是我要制作动画的路径。

例如，如果我想显示整个(假想)路径(由不同颜色的路径组成的路径)的 40%，我将其转换为显示覆盖路径的 60% path3。我们可以在问题中提供的链接中找到为 path3 设置动画的方式。