objective-c - 使用 CAShapeLayer 对 CGMutablePathRef 进行动画处理

Question

我正在尝试为路径设置动画并更改其点，如下面的关键帧所示。因此，顶部的两个点向下移动到底部，中间的点移动到顶部，本质上翻转了它的方向。

这是我用来创建路径的代码:

CGMutablePathRef path = CGPathCreateMutable();
CGPathMoveToPoint(path, nil, 1.0f, 8.0f);
CGPathAddLineToPoint(path, nil, 7.0f, 1.5f);
CGPathAddLineToPoint(path, nil, 13.0f, 8.0f);

shapeLayer = [[CAShapeLayer alloc] init];
shapeLayer.path = path;
shapeLayer.strokeColor = pathColor.CGColor;
shapeLayer.fillColor = [NSColor clearColor].CGColor;
shapeLayer.lineWidth = 2.0f;
[self.layer addSublayer: shapeLayer];

但是，我也不知道如何实际为这些点设置动画。所有有关在线动画路径的信息都只是更改路径起点，而不是实际点。

有没有办法或不同的方法来做到这一点？提前致谢。

Answer 1

您可以将形状图层的路径从一条路径移动到另一条路径进行动画处理。

在您的情况下，您将为初始状态和最终状态创建两条不同的路径。

注意:如果两条路径有不同数量的线段或控制点，动画看起来会很奇怪。

然后，您将为“path”关键路径创建一个动画，其中包含往返值，并将其添加到您要设置动画的图层。如果您还希望属性更改为结束状态，您还应该更新 path 属性以反射(reflect)动画的结束状态。

CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"path"];
animation.duration  = 1.0; // however long your duration should be
animation.fromValue = (__bridge id)fromPath;
animation.toValue   = (__bridge id)toPath;

shapeLayer.path = toPath; // the property should reflect the end state of the animation
[shapeLayer addAnimation:animation forKey:@"myPathAnimation"];