使用 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" 关键路径创建一个动画，并将其添加到您正在制作动画的图层中。如果您还希望属性更改为结束状态，您还应该更新 path 属性以反映动画的结束状态。

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

使用 CAShapeLayer 动画 CGMutablePathRef

Animating a CGMutablePathRef with CAShapeLayer

cocoa

core-animation

objective-c

cgpath