Animate CAShapeLayer path change

Question

I'm trying to animate change of path property of CAShapeLayer like this:

animatePathChange(for: progressLayer, toPath: progressPath.cgPath)
progressLayer.path = progressPath.cgPath

And this isanimatePathChangefunction code:

func animatePathChange(for layer: CAShapeLayer, toPath: CGPath) {
    let animation = CABasicAnimation(keyPath: "path")
    animation.duration = 1.0
    animation.fromValue = layer.path
    animation.toValue = toPath
    animation.timingFunction = CAMediaTimingFunction(name: "easeInEaseOut")
    layer.add(animation, forKey: "path")
}

But the end result is not what i want. How can i achieve animation that changes layer's path from old value to new?

This is how it looks right now with the code above:

Answer 1

Don't animate the path. Configure the whole path and then set the strokeEnd — let's say it's 0, so the user sees nothing. Now each time you want to make a change, animate the change from the current strokeEnd to the new strokeEnd. The path will appear to extend further round the curve.