CAShapeLayer animation flash when I set duration very small - objective-c

Question

I want to realize a round progress, and the progress value can be set dynamically. The code is followed:
- (CGPoint)center {
return CGPointMake(self.view.frame.origin.x + self.view.frame.size.width / 2.0,
self.view.frame.origin.y + self.view.frame.size.height / 2.0);
}
- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view.
CGMutablePathRef roundPath = CGPathCreateMutable();
CGPathAddArc(roundPath, NULL, self.center.x, self.center.y,
20,
2 * M_PI + M_PI_2,
M_PI_2,
YES);
CAShapeLayer *backgroundLayer = [CAShapeLayer layer];
backgroundLayer.frame = self.view.layer.bounds;
backgroundLayer.path = roundPath;
backgroundLayer.strokeColor = [[NSColor blueColor] CGColor];
backgroundLayer.fillColor = nil;
backgroundLayer.lineWidth = 10.0f;
backgroundLayer.lineJoin = kCALineJoinBevel;
[self.view.layer addSublayer:backgroundLayer];
CAShapeLayer *pathLayer = [CAShapeLayer layer];
pathLayer.frame = self.view.layer.bounds;
pathLayer.path = roundPath;
pathLayer.strokeColor = [[NSColor whiteColor] CGColor];
pathLayer.fillColor = nil;
pathLayer.lineWidth = 10.0f;
pathLayer.lineJoin = kCALineJoinBevel;
[self.view.layer addSublayer:pathLayer];
self.pathLayer = pathLayer;
[self start];
}
- (void)start {
CABasicAnimation *pathAnimation = [CABasicAnimation animationWithKeyPath:#"strokeEnd"];
pathAnimation.duration = 0.01;
pathAnimation.fromValue = [NSNumber numberWithFloat:self.progress];
pathAnimation.toValue = [NSNumber numberWithFloat:self.progress+0.01];
[self.pathLayer setStrokeEnd:self.progress + 0.01];
[pathAnimation setDelegate:self];
[self.pathLayer addAnimation:pathAnimation forKey:#"strokeEndAnimation"];
}
- (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag {
self.progress += 0.01;
if (self.progress < 1.0) {
[self start];
}
}
I found when I set the duration be 0.1f or even bigger, it will work right.But if I set the duration be 0.01f, the animation will not start from the correct value, it will animate from a bigger value then decrease to the correct value. So the whole animation always flash, anybody got the same question or know why? Thanks very much!

Answer 1

originaluser2 is probably right about the specific cause, but this design is incorrect.
At 60fps, one frame is 0.0167s. You're asking to animate the change in less than a single frame. Each of those animations has its own media timing (kCAMediaTimingFunctionDefault), which means your creating complicated ramp up/ramp down velocities through your animation. And your timing is going to be erratic anyway because you're picking up a little error in every step (animationDidStop can take slightly different amounts of time to run depending on many factors). The whole point of animations is that you don't need to do this kind of stuff. That's why you have an animation engine.
Just animate to progress over the time you want it to take. Don't try to inject many extra animation steps. Injecting steps is what the animation engine does.
CALayer is designed to do most of this stuff for you anyway. You don't need to be creating explicit animations for this; just use implicit. Something like (untested, uncompiled):
- (void)setProgress: (CGFloat)progress {
double velocity = 1.0;
[CATransaction begin];
double delta = fabs(_progress - progress);
[CATransaction setAnimationDuration: delta * velocity];
[self.pathLayer setStrokeEnd: progress];
[CATransaction commit];
}

Answer 2

As Rob says, adding repeated animations isn't the best idea. His solution will probably work out nicely for you. However if you're still insistent on using repeated animations, here's the fix for your current code:
The problem is you're calling this line of code before you add your animation.
[self.pathLayer setStrokeEnd:self.progress + 0.01];
This will create an implicit animation on the layer, and therefore when you come to add your explicit animation – it will cause problems (the flashes you were observing).
The solution is to update the model layer within a CATransaction after you start the animation. You'll also need to set disableActions to YES in order to prevent an implicit animation from being generated.
For example:
- (void)start {
CABasicAnimation *pathAnimation = [CABasicAnimation animationWithKeyPath:#"strokeEnd"];
pathAnimation.duration = 0.01;
pathAnimation.fromValue = [NSNumber numberWithFloat:self.progress];
pathAnimation.toValue = [NSNumber numberWithFloat:self.progress+0.01];
[pathAnimation setDelegate:self];
[self.pathLayer addAnimation:pathAnimation forKey:#"strokeEndAnimation"];
[CATransaction begin];
[CATransaction setDisableActions:YES];
[self.pathLayer setStrokeEnd:self.progress + 0.01];
[CATransaction commit];
}
Although, it's also worth noting you could just create your animation by just using a CATransaction, and the implicit animation for strokeEnd.
For example:
- (void)start {
[CATransaction begin];
[CATransaction setAnimationDuration:0.01];
[CATransaction setCompletionBlock:^{
self.progress += 0.01;
if (self.progress < 1.0) {
[self start];
}
}];
[self.pathLayer setStrokeEnd:self.progress + 0.01];
[CATransaction commit];
}
That way you don't have to create a new explicit animation on each iteration.