iOS - 仅对 UIBezierPath 的“appendPath”进行动画处理

Posted 2023-03-16

【中文标题】iOS - 仅对 UIBezierPath 的“appendPath”进行动画处理

【英文标题】：iOS - Animate only the 'appendPath' of an UIBezierPath

【发布时间】：2014-03-01 17:39:50

【问题描述】：

有很多示例如何沿 UIBezierPath 设置动画。但我想不通，如何只为 UIBezierPath 的 appendPath 设置动画。

就我而言，我有以下示例：

// Create path from view controller
UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:
                      CGRectMake(0, 0, tutorialController.bounds.size.width,
                                 tutorialController.bounds.size.height) cornerRadius:0];

// Create circle path
UIBezierPath *circlePath = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(x, y, 2.0*radius, 2.0*radius) cornerRadius:radius];
[path appendPath:circlePath];
[path setUsesEvenOddFillRule:YES];

// Create spot layer
spotLayer = [CAShapeLayer layer];
spotLayer.path = path.CGPath;
spotLayer.fillRule = kCAFillRuleEvenOdd;
spotLayer.fillColor = [UIColor blackColor].CGColor;
spotLayer.opacity = 0.90;

所以基本上它是一个矩形内的圆圈，我现在只想为圆圈设置动画。在所有尝试中，矩形也被移动了。

这是我的示例，我如何“沿着”路径制作动画

CGPoint pathStart = CGPointMake(96.000000, 226.000000);
CGPoint pathEnd = CGPointMake(120.000000, 300.000000);

[circlePath moveToPoint:pathStart];
[circlePath addLineToPoint:pathEnd];

CAKeyframeAnimation *anim = [CAKeyframeAnimation animationWithKeyPath:@"position"];
anim.path = circlePath.CGPath;
anim.duration = 5.0;
anim.calculationMode = kCAAnimationPaced;
[spotLayer addAnimation:anim forKey:@"bezierPathAnim"];

但这不是我想要的... 我想要做的是，通过动画移动我的圆形路径（这是一个矩形路径的附加路径）

有人有什么想法吗？

问候

【问题讨论】：

代码的“动画”部分到底在哪里？

目前没有什么适合我的。因此，我只能使用 CAKeyframeAnimation 为“沿”路径设置动画。

为什么不制作两个形状图层——一个包含矩形路径，另一个包含圆形路径——并且只为其中一个设置动画？

【参考方案1】：

我解决了我的问题:-)

这里是解决方案...

// If there is an old path animate to the new path
if(oldPath != nil)
    CABasicAnimation *anim = [CABasicAnimation animationWithKeyPath:@"path"];
    [anim setFromValue:(__bridge id)oldPath];
    [anim setToValue:(__bridge id)[path CGPath]];
    [anim setDuration:0.3];
    [anim setTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut]];
    [spotLayer addAnimation:anim forKey:@"path"];

首先我保留了旧路径（起点），然后动画到新设置的路径。