如何为CGPath添加动画效果？

Question

我想知道是否有一种使用核心动画的方法来实现这一点。具体来说，我正在向支持图层的自定义NSView添加子图层，并将其委托给另一个自定义NSView。该类的drawInRect方法绘制一个单独的CGPath:

- (void)drawInRect:(CGRect)rect inContext:(CGContextRef)context
{
    CGContextSaveGState(context);
    CGContextSetLineWidth(context, 12);

    CGMutablePathRef path = CGPathCreateMutable();
    CGPathMoveToPoint(path, NULL, 0, 0);
    CGPathAddLineToPoint(path, NULL, rect.size.width, rect.size.height);

    CGContextBeginPath(context);
    CGContextAddPath(context, path);
    CGContextStrokePath(context);
    CGContextRestoreGState(context);
}

我希望实现的效果是通过动画绘制这条线。也就是说，我希望这条线能以动画方式“拉伸”。使用Core Animation似乎可以简单地实现，但我还没有找到相关资料。

你有什么建议可以帮助我完成这个目标吗？

- Jordan Kay

Answer 1

我找到了这个动画路径示例，想与其他寻找代码示例的人分享。

你将使用CAShapeLayer的strokeStart和strokeEnd属性，需要sdk 4.2，所以如果你想支持旧版本的iOS SDK，恐怕这不是你想要的。

这些属性的真正好处在于它们是可动画的。通过在几秒钟内将strokeEnd从0.0动画到1.0，我们可以轻松地显示路径正在被绘制：

CABasicAnimation *pathAnimation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
pathAnimation.duration = 10.0;
pathAnimation.fromValue = [NSNumber numberWithFloat:0.0f];
pathAnimation.toValue = [NSNumber numberWithFloat:1.0f];
[self.pathLayer addAnimation:pathAnimation forKey:@"strokeEndAnimation"];

最后，添加第二层，其中包含一个笔的图像，并使用CAKeyframeAnimation沿着路径以相同的速度对其进行动画处理，使幻象更加完美:

CAKeyframeAnimation *penAnimation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
penAnimation.duration = 10.0;
penAnimation.path = self.pathLayer.path;
penAnimation.calculationMode = kCAAnimationPaced;
[self.penLayer addAnimation:penAnimation forKey:@"penAnimation"];

这里可以查看源代码here，并且还有一个演示视频here。阅读作者的博客以获取更多信息。

- John Riselvato

---

非常完美，正是我想要的，谢谢Ole Begemann。我在使用CAShapeLayer绘制曲线时遇到了填充问题，直到我注意到他通过将fillColor设置为nil来解决这个问题。 - Elise van Looij

Answer 2

当然，不要自己画线。添加一个12像素高的子层，具有平坦的背景颜色，从零宽度帧开始，并动画到您的视图宽度。如果需要将端点设置为圆角，请将该层的cornerRadius设置为其高度的一半。

- Noah Witherspoon

---

就我个人而言，CAShapeLayer 是动画任意路径的绝佳选择。但对于单条直线，我会坚持使用 Noah 的答案。 :-) - Kris Jenkins