When animating a CAShapeLayer, is it necessary to constantly keep updating the path of the layer, or is there a way to rely on CABasicAnimation alone?
In the example below, I set up four circles paths and draw them. Then I want to animate them down to disappear. After the animation has completed however, they spring back to their original paths.
int radius = halfWidth-30; //the radius is the distance out from the centre
trackActive.path = [UIBezierPath bezierPathWithArcCenter:cicleCenter radius:radius startAngle:degreesToRadians(circleStart) endAngle:degreesToRadians(circleEnd) clockwise:true].CGPath;
circleActive.path = [UIBezierPath bezierPathWithArcCenter:cicleCenter radius:radius startAngle:degreesToRadians(circleStart) endAngle:degreesToRadians(circleEnd) clockwise:true].CGPath;
radius = halfWidth - 10;
trackNew.path = [UIBezierPath bezierPathWithArcCenter:cicleCenter radius:radius startAngle:degreesToRadians(circleStart) endAngle:degreesToRadians(circleEnd) clockwise:true].CGPath;
circleNew.path = [UIBezierPath bezierPathWithArcCenter:cicleCenter radius:radius startAngle:degreesToRadians(circleStart) endAngle:degreesToRadians(circleEnd) clockwise:true].CGPath;
NSArray * layers = @[trackActive, circleActive, trackNew, circleNew];
for (CAShapeLayer * layer in layers){
[CATransaction begin];
CABasicAnimation * animation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
animation.duration = 1.0f;
animation.removedOnCompletion = false;
animation.fromValue = @(1.0);
animation.toValue = @(0.0);
animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
[layer addAnimation:animation forKey:@"circleAnimation"];
[CATransaction commit];
}
I understand that I can add this to set the new path:
[CATransaction setCompletionBlock:^{
//set the new path
layer.path = [UIBezierPath bezierPathWithArcCenter:cicleCenter radius:radius startAngle:degreesToRadians(circleStart) endAngle:degreesToRadians(arcEnd) clockwise:true].CGPath;
}];
But would prefer avoid keep having to update the path, and instead rely on the animation layer exclusively. Is this possible?
Something like: layer.path = animation.path or animation.updatesOriginalPath=true; could be wishful thinking, not sure.
You can simplify your code and omit the spring effect:
[CATransaction begin];
[CATransaction setAnimationDuration:1.0];
[CATransaction setAnimationTimingFunction: kCAMediaTimingFunctionEaseInEaseOut];
layer.strokeEnd = 0.0;
[CATransaction commit];
The transaction will create and add an implicit animation object for you.