如何设置CGPath的绘图动画？

Question

我想知道是否有办法使用Core Animation来做到这一点.具体来说,我将一个子层添加到图层支持的自定义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来做到这一点,但我还是没能遇到任何问题.

您对我如何实现这一目标有任何建议吗？

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

其来源可以被视为在这里和演示视频在这里.阅读创作者博客以获取更多信息.

Answer 2

当然\xe2\x80\x94不要自己划线。添加一个具有平坦背景颜色的 12 像素高的子图层，从零宽度框架开始并以动画显示到视图的宽度。如果需要将末端弄圆，请将图层设置cornerRadius为其高度的一半。

\n