CAKeyFrameAnimation along a CGPath defined by SVG file is jerky.

Question

I want to animate an object along a path. I got it to work, but the movement is not linear. (it slows down a lot along minor bends in the path.)

Here are the main steps.

1) Import the path from an SVG file using PockeSVG

-(CGMutablePathRef)makeMutablePathFromSVG:(NSString *)svgFileName{
    PocketSVG *myVectorDrawing0 = [[PocketSVG alloc] initFromSVGFileNamed:svgFileName];
    UIBezierPath *myBezierPath0 = myVectorDrawing0.bezier;
    return CGPathCreateMutableCopy([myBezierPath0 CGPath]); 
}

2) Create the CAKeyFrameAnimation

CAKeyframeAnimation *moveAlongPath = [CAKeyframeAnimation animationWithKeyPath:@"position"];
CGMutablePathRef animationPath = CGPathCreateMutableCopy(pathForwardTo5);
[moveAlongPath setPath:animationPath];
[moveAlongPath setDuration:1.0f];
moveAlongPath.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];
moveAlongPath.delegate = self;
[[trackButton layer] addAnimation:moveAlongPath forKey:@"moveButtonAlongPath"];
CFRelease(animationPath);

I tried using other CAMediaTimingFunctions and they all exhibit this kind of behavior.

Question: The animation itself works, but it doesn't follow a smooth and consistent speed. Any idea why?

Answer 1

The slow downs that you are seeing is due to the default calculation mode where each segment of the animation takes the same time. This means that very short segments are going to move slower.

If you look a the documentation for the path property, you will see how to achieve a constant velocity along the path:

How the animation proceeds along the path is dependent on the value in the calculationMode property. To achieve a smooth, constant velocity animation along the path, set the calculationMode property to kCAAnimationPaced or kCAAnimationCubicPaced.

So, to get a constant pace throughout the animation you should set the calculationMode to kCAAnimationPaced.