CAShapeLayer 上的 CABasicAnimation 不适用于路径更改

Question

我有进度方法here：

func progress(incremented : CGFloat){
    if incremented <= self.bounds.width{
        self.progressLayer.removeFromSuperlayer()
        let originBezierPathProg = UIBezierPath(roundedRect: CGRect(x:0, y:0, width:0, height:self.bounds.height) , cornerRadius: self.viewCornerRadius)
        originBezierPathProg.close()

        let newBezierPathProg = UIBezierPath(roundedRect: CGRect(x:0, y:0, width:incremented, height:self.bounds.height) , cornerRadius: self.viewCornerRadius)
        bezierPathProg.close()

        self.progressLayer.path = originBezierPathProg.cgPath
        self.borderLayer.addSublayer(self.progressLayer)

        let animation = CABasicAnimation(keyPath: "path")
        animation.fromValue = originBezierPathProg.cgPath
        animation.toValue = newBezierPathProg.cgPath
        animation.duration = 1
        self.progressLayer.add(animation, forKey: animation.keyPath)

        self.progressLayer.path = newBezierPathProg.cgPath
    }
}

我正在尝试以动画方式使进度条取得进展。但是当我调用progress(100) 时，它只是在渲染没有动画的栏。

我该如何解决？

更新：根据 Rob 的建议创建了 MCVE：https://github.com/utkarsh2012/ProgressBarTest。我希望进度条的动画从 width=0 到 width=x（比如 60）

看起来类似于这个问题CABasicAnimation with CALayer path doesn't animate

Answer 1

您问题中最初显示的progress 方法很好。问题在于你如何使用它。说了这么多，让我们来看看 MCVE。

在your MCVE 中，有几件事阻止了动画，即：

1. progress 方法如下：

   func progress(incremented: CGFloat) {
       if incremented <= bounds.width {
           let toPath = UIBezierPath(roundedRect: CGRect(x: 0, y: 0, width: incremented + 100, height: bounds.height), cornerRadius: viewCornerRadius)
   
           progressLayer.path = toPath.cgPath
           borderLayer.addSublayer(progressLayer)
   
           let animation = CABasicAnimation(keyPath: "path")
           animation.fromValue = self.progressLayer.path
           animation.toValue = toPath.cgPath
           animation.duration = 3
           progressLayer.add(animation, forKey: animation.keyPath)
       }
   }
   

   这就是将path 设置为新路径，然后从该路径动画到新路径（即动画到和从同一路径）。因此，没有动画。

   在将path 更改为其新的“结束状态”并启动动画之前保存旧路径。使用保存的路径作为动画的fromValue。

2. value 属性正在调用 layoutSubviews：

   var value: Int? {
       didSet {
           progress(value: value!)
           self.layoutSubviews()
       }
   }
   

   切勿直接致电layoutSubviews()。

3. 视图控制器正在执行以下操作：

   override func viewDidLoad() {
       super.viewDidLoad()
       // Do any additional setup after loading the view, typically from a nib.
       let view = DetailView(frame: self.view.frame)
       view.value = 60
       self.containerView.addSubview(view)
   }
   

   不要尝试在viewDidLoad 中启动动画。这在视图生命周期中还为时过早。改用viewDidAppear（或其他）。在 viewDidLoad 中执行此操作通常在视图生命周期中为时过早。

4. 与 viewDidLoad 代码相关，您在将 value 添加到视图层次结构之前更改了 DetailView（触发动画）。

---

在此处查看修复https://github.com/robertmryan/ProgressBarTest。