使用中心动画为 CAShapeLayer 的贝塞尔路径设置动画答案

【问题标题】：Animate CAShapeLayer's bezier path with animation from center使用中心动画为 CAShapeLayer 的贝塞尔路径设置动画
【发布时间】：2016-02-06 11:15:43
【问题描述】：

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

初始状态：

最终状态：

动画：

这是我的代码：

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];

【问题讨论】：

如果你的动画开始显示层应该是这样，并且动画移动到你不期望的状态，很可能你的finalPath没有正确计算。如果你放大一些东西，请记住你的路径创建代码的原点在左上角，而不是在中心。
最终状态是正确的，但我希望它从图表的中心点缩放。有什么办法可以将路径创建的原点移到中心？
是的，您可以查看 CALayer 的 anchor 和 position 属性。但是，使用transform 属性创建具有正确大小和形状的图层并为其设置动画可能会更容易。有一个方便的函数可以从 CGAffineTransform 创建 CGAffineTransform3D（这将有助于使事情变得清晰和简单）。
谢谢！使用 CGAffineTransform3D 完成。

标签： ios objective-c animation core-animation cabasicanimation

【解决方案1】：

要获得您想要的结果，您不能只是扩展 - 您将在开始和结束时拥有相同的路径。你所说的例子有一个路径动画。

您所要做的就是绘制彼此相关的路径，按照您希望它们动画的方式。如果您想为路径设置动画，就好像它锚定在中心一样，您需要像这样绘制它们。将两条路径彼此居中。

这是一个简单的例子：

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

在此示例中，您的正方形将从中心放大。如果您的路径当前从右侧缩放，那是因为那是您的路径对齐的位置。

【讨论】：