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.
Comments
-
Karolis Raišelis almost 2 years
I'm trying to animate change of
path
property ofCAShapeLayer
like this:animatePathChange(for: progressLayer, toPath: progressPath.cgPath) progressLayer.path = progressPath.cgPath
And this is
animatePathChange
function 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:
-
Karolis Raišelis about 7 yearsWhy i didn't thought about this.. Thank's a lot!