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

 手机用户2502853847 发布于 2023-01-29 16:13

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

以下是主要步骤.

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,他们都表现出这种行为.

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

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

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

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

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

    2023-01-29 16:18 回答
撰写答案
今天,你开发时遇到什么问题呢?
立即提问
热门标签
PHP1.CN | 中国最专业的PHP中文社区 | PNG素材下载 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有