如何在iOS中绘制具有多种颜色的动画路径？ [英] How to draw an animated path with multiple colors in ios?

问题描述

除了弧可能包含更多颜色之外，我还需要在iOS应用中绘制类似于以下图像的图片：

I need to draw something like the following image in my iOS app, except that the arc may contain more colors:

我知道如何绘制，但是我正在寻找一种方法动画化路径的绘制。

I know how to draw it, but I'm looking for a way to animate the drawing of the path.

有一个类似的问题此处，但该圆圈未设置动画。 这是另一个问题，它在其中解释了如何对圆进行动画处理，并且在我的情况是，它不能处理路径中的多种颜色。

There is a similar question here, except that the circle is not animated. This is another question where it's explained how to animate a circle, and it work ok in my case, except that it doesn't handle multiple colors in the path.

如何实现？

推荐答案

我找到了一个通用解决方案效果很好。由于无法绘制不同颜色的唯一路径，因此我无需绘制动画就可以绘制所有不同颜色的路径，这些路径构成了我想要的路径。之后，我沿相反方向绘制了一条覆盖所有这些路径的唯一路径，并将动画应用于此路径。

I found a general solution that work very well. Since there is no way for drawing a unique path of different colors, then I just draw, without animation, all the paths of different colors that compound the path that I want. After that, I drawn an unique path in the reverse direction that cover all those paths, and apply an animation to this path.

例如，在上述情况下，我用以下代码绘制了两条弧：

For example, in the case above, I draw both arcs with the following code:

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 ，然后将其添加到将添加到视图的层中：

After that, I get path path3 and then I add it to a layer that will be added to the view:

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

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

Note in this path that it covers the previous two path in the reverse order, since its startAngle is equal to the value of endAngle, its endAngle is equal to startAngle and the clockwise property is set to true. This path is the one that I will go to animate.

例如，如果我想显示整个（假想的）路径（由不同颜色的路径组成的路径）的40％，我将其翻译为显示我的覆盖路径的60％ path3 。在问题中提供的链接中可以找到对 path3 进行动画处理的方式。

For example, if I want to show the 40% of the whole (imaginary) path (the one composed by the paths of different colors), I translate that to show the 60% of my cover path path3. The way in which we can animate path3 can be found in the link provided in the question.

这篇关于如何在iOS中绘制具有多种颜色的动画路径？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！