Animate CAShapeLayer path change

10,233

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.

enter image description here

Share:
10,233
Karolis Raišelis
Author by

Karolis Raišelis

Something simple.

Updated on June 08, 2022

Comments

  • Karolis Raišelis
    Karolis Raišelis almost 2 years

    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:

    Result

  • Karolis Raišelis
    Karolis Raišelis about 7 years
    Why i didn't thought about this.. Thank's a lot!