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

可以查看哪些来源here和演示视频here。请阅读创作者blog以获取更多信息。

Answer 2

当然 - 不要自己画线。添加一个12像素高的具有平坦背景颜色的子图层，从零宽度框架开始，并动画显示视图的宽度。如果需要对圆形进行舍入，请将图层的cornerRadius设置为其高度的一半。

如何设置CGPath的绘图动画？

2 个答案: