使用CAShapeLayer

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