How do I make a layer maintain the final value of a CABasicAnimation

Question

Consider the following animation:

CABasicAnimation *pathAnimation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
pathAnimation.duration = 1.0;
pathAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut];
pathAnimation.fromValue = [NSNumber numberWithFloat:0.0f];
pathAnimation.toValue = [NSNumber numberWithFloat:1.0f];
pathAnimation.removedOnCompletion = NO;
pathAnimation.delegate = self;

This will essentially animate the drawing of the layer from one end to the next. The problem is that once the animation completes, the strokeEnd property resets back to 0 (where it was initially set). How do I make the final value "stick"?

I have attempted to change this in the animationDidStop delegate method. This mostly works, but can cause a flash of strokeEnd at 0 briefly, even when put inside a CATransaction to disable animations. I have also played with the additive and cumulative properties to no avail. Any suggestions?

possible duplicate of Animation of stroke of circle segment ends in complete stroke — Jano
I find it easier to set the properties on my actual layer, and then apply an animation that specifies the time and easing. In some cases I will specifically the starting values, but leaving the end values to be animated automatically solves this problem. — Marc

matt matt · Accepted Answer · 2013-05-01T21:49:30

You simply set the strokeEnd property to its final value yourself! Like this:

// your current code (stripped of unnecessary stuff)

CABasicAnimation *pathAnimation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
pathAnimation.duration = 1.0;
pathAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut];
pathAnimation.fromValue = [NSNumber numberWithFloat:0.0f];
pathAnimation.toValue = [NSNumber numberWithFloat:1.0f];

// just add this to it:

theLayer.strokeEnd = 1;

// and now add the animation to theLayer

If strokeEnd were implicitly animatable (so that that line would itself cause animation) we would turn off implicit animation first:

[CATransaction setDisableActions:YES];
theLayer.strokeEnd = 1;

Note that your pathAnimation.removedOnCompletion = NO; is wrong, and so is the other answer's kCAFillModeForwards. Both are based on misunderstandings of how Core Animation works.

How do I make a layer maintain the final value of a CABasicAnimation

1 Answers