使用来自中心的动画制作CAShapeLayer的bezier路径

Question

我正在尝试为图表设置动画，使其从中心缩放。现在它从左到右扩展。

初始状态：

最终状态：

动画：

这是我的代码：

maskLayer = [[CAShapeLayer alloc] init];
maskLayer.borderColor=[UIColor redColor].CGColor;
maskLayer.borderWidth=1;
maskLayer.fillColor=UIColorFromRGB(0x91E5FF).CGColor;
maskLayer.frame = CGRectMake(0,0, rect.size.width, rect.size.height);
maskLayer.path = finalPath.CGPath;
maskLayer.opacity=0.8;
[self.layer addSublayer:maskLayer];

CABasicAnimation *anim = [CABasicAnimation animationWithKeyPath:@"path"];
anim.duration = 4;
anim.timingFunction=[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];
anim.removedOnCompletion = NO;
anim.fillMode = kCAFillModeBoth;
anim.fromValue = (id)[initialPath CGPath];
anim.toValue= (id)[finalPath CGPath];
[maskLayer addAnimation:anim forKey:nil];

Answer 1

要获得您想要的结果，您无法进行扩展 - 您将在开始和结束时拥有相同的路径。您声明的示例有一个路径动画。

您所要做的就是绘制彼此相关的路径，以及您希望它们制作动画的方式。如果您想要为您的路径设置动画，就像它固定在中心一样，您需要像这样绘制它们。将您的路径放在彼此中心。

这是一个简单的例子：

UIBezierPath* initialPath = [UIBezierPath bezierPathWithRect: CGRectMake(-25, -25, 50, 50)];
UIBezierPath* finalPath = [UIBezierPath bezierPathWithRect: CGRectMake(-40, -40, 80, 80)];

在此示例中，您的方块将从中心向上扩展。如果您的路径当前正在从右侧缩放，那么因为您的路径已经对齐。