Swift 刷新绘图功能而不删除子层

我试图创建一个活动图，就像Apple watch上的活动图一样。（3个带动画的戒指）

这是我的全部代码：

private(set) var animationTime: [CFTimeInterval] = [1, 1, 1]
private(set) var values: [Double] = [0, 0, 0]
private(set) var colors: [UIColor] = [UIColor.red, CUIColor.blue, CUIColor.green]
private(set) var radiusRatios: [Double] = [1, 1, 1]



// to add new value
func setCircle(number index: Int, data: Double) {
    values[index] = data
}

   var drawing = false

 var animationOption = UIView.AnimationOptions()
   override public func draw(_ rect: CGRect) {
      if !drawing {
         switch style {
         case .ring:
            drawing = true
            let borderThickness = (rect.width / 20).rounded().nextUp
            let circleDistance = (rect.width / 20).rounded().nextUp
            self.layer.sublayers?.removeAll()


            var maximumAnimationDuration: TimeInterval = 0
            for index in 0 ..< dataSize {

               let belowCircle = CAShapeLayer()
               let mainCircle = CAShapeLayer()
               layer.addSublayer(belowCircle)
               layer.addSublayer(mainCircle)
               belowCircle.position = CGPoint(x: layer.bounds.midX, y: layer.bounds.midY)
               mainCircle.position = CGPoint(x: layer.bounds.midX, y: layer.bounds.midY)

               let outerCircularPath = UIBezierPath(arcCenter: .zero,
                                                    radius: rect.width / 2
                                                       - borderThickness * CGFloat(2 * index + 1) / 2
                                                       - circleDistance * CGFloat(index),
                                                    startAngle: 0,
                                                    endAngle: 2 * CGFloat.pi,
                                                    clockwise: true)
               belowCircle.path = outerCircularPath.cgPath
               mainCircle.path = outerCircularPath.cgPath

               belowCircle.opacity = 0.2
               belowCircle.strokeColor = colors[index].cgColor
               belowCircle.lineWidth = borderThickness
               belowCircle.fillColor = UIColor.clear.cgColor
               belowCircle.lineCap = CAShapeLayerLineCap.round

               mainCircle.strokeColor = colors[index].cgColor
               mainCircle.lineWidth = borderThickness
               mainCircle.fillColor = UIColor.clear.cgColor
               mainCircle.lineCap = CAShapeLayerLineCap.round
               mainCircle.strokeEnd = 0
               mainCircle.transform = CATransform3DMakeRotation(-CGFloat.pi / 2, 0, 0, 1)

               // outer circle
               let animation = CABasicAnimation(keyPath: "strokeEnd")
               animation.toValue = values[index] < 0.001 ? 0.001 : values[index]
               animation.duration = animationTime[index]
               animation.fillMode = CAMediaTimingFillMode.forwards
               animation.isRemovedOnCompletion = false
               mainCircle.add(animation, forKey: "RingChartOuterCircle\(index)")

               maximumAnimationDuration = max(maximumAnimationDuration, animationTime[index])
            }
            UIView.transition(with: self,
                              duration: maximumAnimationDuration,
                              options: animationOption,
                              animations: nil,
                              completion: { [weak self] _ in
                                 self?.drawing = false
               })

就像这样：

setChartsValus(outerValue: 0.5, middleValue: 0.8, innerValue: 0.6)

我的问题是，当我想添加一个新值（每隔几分钟就会发生一次）时，我必须删除所有子层并再次执行该过程，这就是为什么每次调用时，所有环都会返回到零，并再次从0移动以填充该值，这一点都不好。 出现此问题的原因是：

  self.layer.sublayers?.removeAll()

如果我不全部移除，所有层都会相互重叠，变得如此混乱

我想，当我从示例0.7中添加一个新值，旧值是0.3时，环开始从0.3增长到0.7（就像apple watch活动应用程序），而不是回到零并再次填充

如果每个人都能在这方面帮助我，我将不胜感激？我花了两天时间修好它，但我找不到任何办法

---

非常感谢

我的解决方案是删除以前的图层，添加具有相同strokeEnd的新图层，并将其设置为新值

override public func draw(_ rect: CGRect) {
    transform(rect)
}

func transform(_ rect: CGRect, to newValues: [CGFloat]? = nil) {
    if !drawing {
       switch style {
       case .ring:
        drawing = true
        let borderThickness = (rect.width / 20).rounded().nextUp
        let circleDistance = (rect.width / 20).rounded().nextUp
        self.layer.sublayers?.removeAll()

        for index in 0 ..< 3 {

             let belowCircle = CAShapeLayer()
             let mainCircle = CAShapeLayer()
             layer.addSublayer(belowCircle)
             layer.addSublayer(mainCircle)
             belowCircle.position = CGPoint(x: layer.bounds.midX, y: layer.bounds.midY)
             mainCircle.position = CGPoint(x: layer.bounds.midX, y: layer.bounds.midY)

             let outerCircularPath = UIBezierPath(arcCenter: .zero,
                                                  radius: rect.width / 2
                                                     - borderThickness * CGFloat(2 * index + 1) / 2
                                                     - circleDistance * CGFloat(index),
                                                  startAngle: 0,
                                                  endAngle: 2 * CGFloat.pi,
                                                  clockwise: true)
             belowCircle.path = outerCircularPath.cgPath
             mainCircle.path = outerCircularPath.cgPath

             belowCircle.opacity = 0.2
             belowCircle.strokeColor = colors[index].cgColor
             belowCircle.lineWidth = borderThickness
             belowCircle.fillColor = UIColor.clear.cgColor
             belowCircle.lineCap = CAShapeLayerLineCap.round

             mainCircle.strokeColor = colors[index].cgColor
             mainCircle.lineWidth = borderThickness
             mainCircle.fillColor = UIColor.clear.cgColor
             mainCircle.lineCap = CAShapeLayerLineCap.round
            if let newValues = newValues {
                mainCircle.strokeEnd = values[index]

            } else {
                mainCircle.strokeEnd = 0
            }
             mainCircle.transform = CATransform3DMakeRotation(-CGFloat.pi / 2, 0, 0, 1)
            
            let animation = CABasicAnimation(keyPath: "strokeEnd")
            if let newValues = newValues {
                animation.toValue = newValues[index] < 0.001 ? 0.001 : newValues[index]

            } else {
                animation.toValue = values[index] < 0.001 ? 0.001 : values[index]
            }
               animation.duration = animationTime[index]
               animation.fillMode = CAMediaTimingFillMode.forwards
               animation.isRemovedOnCompletion = false
            mainCircle.add(animation, forKey: "RingChartOuterCircle\(index)")
        }
        drawing = false
       case .chart:
          break
       }
    }

---

谢谢@spiritofcore，我以前尝试过类似的东西，它很有帮助，但是没有任何动画，戒指只是跳转到新的值。你确定你编码正确吗？我测试了它，它有动画。我完全复制了你的代码，更奇怪的是，如果我删除代码中的动画部分，什么都不会改变。谢谢你，你是对的，这是我的错误，现在它起作用了

override public func draw(_ rect: CGRect) {
    transform(rect)
}

func transform(_ rect: CGRect, to newValues: [CGFloat]? = nil) {
    if !drawing {
       switch style {
       case .ring:
        drawing = true
        let borderThickness = (rect.width / 20).rounded().nextUp
        let circleDistance = (rect.width / 20).rounded().nextUp
        self.layer.sublayers?.removeAll()

        for index in 0 ..< 3 {

             let belowCircle = CAShapeLayer()
             let mainCircle = CAShapeLayer()
             layer.addSublayer(belowCircle)
             layer.addSublayer(mainCircle)
             belowCircle.position = CGPoint(x: layer.bounds.midX, y: layer.bounds.midY)
             mainCircle.position = CGPoint(x: layer.bounds.midX, y: layer.bounds.midY)

             let outerCircularPath = UIBezierPath(arcCenter: .zero,
                                                  radius: rect.width / 2
                                                     - borderThickness * CGFloat(2 * index + 1) / 2
                                                     - circleDistance * CGFloat(index),
                                                  startAngle: 0,
                                                  endAngle: 2 * CGFloat.pi,
                                                  clockwise: true)
             belowCircle.path = outerCircularPath.cgPath
             mainCircle.path = outerCircularPath.cgPath

             belowCircle.opacity = 0.2
             belowCircle.strokeColor = colors[index].cgColor
             belowCircle.lineWidth = borderThickness
             belowCircle.fillColor = UIColor.clear.cgColor
             belowCircle.lineCap = CAShapeLayerLineCap.round

             mainCircle.strokeColor = colors[index].cgColor
             mainCircle.lineWidth = borderThickness
             mainCircle.fillColor = UIColor.clear.cgColor
             mainCircle.lineCap = CAShapeLayerLineCap.round
            if let newValues = newValues {
                mainCircle.strokeEnd = values[index]

            } else {
                mainCircle.strokeEnd = 0
            }
             mainCircle.transform = CATransform3DMakeRotation(-CGFloat.pi / 2, 0, 0, 1)
            
            let animation = CABasicAnimation(keyPath: "strokeEnd")
            if let newValues = newValues {
                animation.toValue = newValues[index] < 0.001 ? 0.001 : newValues[index]

            } else {
                animation.toValue = values[index] < 0.001 ? 0.001 : values[index]
            }
               animation.duration = animationTime[index]
               animation.fillMode = CAMediaTimingFillMode.forwards
               animation.isRemovedOnCompletion = false
            mainCircle.add(animation, forKey: "RingChartOuterCircle\(index)")
        }
        drawing = false
       case .chart:
          break
       }
    }

override func viewDidLoad() {
    super.viewDidLoad()
    
    setChartsValus(outerValue: outerValue, middleValue: middleValue, innerValue: innerValue)
    
    // suppose we need to change 10% every 2 second
    Timer.scheduledTimer(timeInterval: 2, target: self, selector: #selector(changeValue), userInfo: nil, repeats: true)
}

@objc func changeValue() {
    outerValue += 0.1
    innerValue += 0.1
    middleValue += 0.1
    
    ringChart.layer.sublayers?.removeAll()
    ringChart.transform(ringChart.bounds, to: [outerValue, middleValue, innerValue])
}