刷新绘图功能，不删除子图层

Question

我尝试创建一个活动图，例如 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
               })

当我想使用它时，我从父视图控制器中使用这个功能：

 public func setChartsValus(outerValue: Double, middleValue: Double, innerValue: Double) {

      ringChart.setNeedsDisplay()
      ringChart.setCircle(number: 0, data: outerValue)
      ringChart.setCircle(number: 1, data: middleValue)
      ringChart.setCircle(number: 2, data: innerValue)
   }

这样：

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

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

  self.layer.sublayers?.removeAll()

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

我想，当我从示例 0.7 添加一个新值时，旧值是 0.3，环开始从 0.3 增长到 0.7（如苹果手表活动应用程序），而不是回到零并再次填充它。

如果每个人都可以帮助我，我将不胜感激？我花了两天时间修复它，但我找不到任何方法。

非常感谢

Answer 1

我的解决方案是删除以前的图层，添加具有相同 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
       }
    }

在容器视图控制器中，我用我的新值再次调用函数变换：

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])
}