沿SVG文件定义的CGPath的CAKeyFrameAnimation是生涩的.

Question

我想沿路径设置对象的动画.我得到了它的工作,但运动不是线性的.(它在路径中的小弯道上减速很多.)

以下是主要步骤.

1)使用PockeSVG从SVG文件导入路径

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

2)创建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);

我尝试使用其他CAMediaTimingFunctions,他们都表现出这种行为.

问题:动画本身有效,但它并不遵循平滑一致的速度.知道为什么吗？

Answer 1

您看到的减速是由于默认计算模式,其中动画的每个片段占用相同的时间.这意味着非常短的部分将变得更慢.

如果您查看属性的文档path,您将看到如何在路径上实现恒定的速度:

动画沿路径的行进方式取决于calculationMode属性中的值.要沿路径获得平滑,恒定速度的动画,请将calculationMode属性设置为kCAAnimationPaced或kCAAnimationCubicPaced.

因此,要在整个动画中保持恒定的速度,您应该设置calculationMode为kCAAnimationPaced.