如何为CGPath的绘图部分设置动画答案

【问题标题】：How to animate drawing part of CGPath如何为CGPath的绘图部分设置动画
【发布时间】：2017-09-14 07:11:56
【问题描述】：

我想处理以下场景：

如果我使用 CGBezierPath 和 CAShapeLayer 绘制一个矩形，如下所示：

    CAShapeLayer *layerX = [CAShapeLayer layer];
    layerX.path = path.CGPath;

    layerX.lineWidth   = 3;
    layerX.strokeColor = [[UIColor whiteColor] CGColor];
    layerX.fillColor   = [[UIColor clearColor] CGColor];

    [self.view.layer addSublayer: layerX];

我想添加动画，就像我附加的图像一样，这个被清除的区域一直围绕矩形路径移动，因此它提供了一遍又一遍地绘制矩形的视觉效果。 [旧蛇游戏中的蛇运动]

我尝试使用 CABasicAnimation 制作动画，但我确实无法实现任何目标，提前致谢。

【问题讨论】：

标签： ios objective-c core-animation cashapelayer cgpath

【解决方案1】：

试试这个代码可能会有所帮助。

    UIBezierPath *drawablePath = [UIBezierPath bezierPathWithRect:CGRectMake(100.0, 100.0, 150.0, 100.0)];
    CAShapeLayer *squareLayer = [[CAShapeLayer alloc] init];
    squareLayer.path = drawablePath.CGPath;
    squareLayer.strokeColor = [UIColor redColor].CGColor;
    squareLayer.lineWidth = 5.f;
    squareLayer.fillColor = [UIColor clearColor].CGColor;
    squareLayer.strokeEnd = 1.f;
    //squareLayer.strokeEnd = 0.9; // this line use draw half line but some animation issue.
    [self.view.layer addSublayer:squareLayer];

    CABasicAnimation *drawAnimation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
    drawAnimation.fromValue = (id)[NSNumber numberWithFloat:0.10];
    drawAnimation.toValue = (id)[NSNumber numberWithFloat:1.f];
    drawAnimation.duration = 5.f;
    drawAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];
    [squareLayer addAnimation:drawAnimation forKey:@"drawRectStroke"];

此代码用于绘制带有动画的矩形。

【讨论】：

是的，它用动画绘制了一个矩形，但这不是我想要的，请重新阅读问题。

【解决方案2】：

您必须为 strokeStart 和 strokeEnd 设置动画，并使用 CAAnimationGroup 使它们同时发生。

我发现了这个link，它做了类似的事情，但速度很快。我认为这可能会有所帮助。

如果你做不到，我会尝试实现它。但我现在不能。

编码愉快。

【讨论】：

谢谢，我已经阅读了很多这些教程，但无法实现我的方法。

【解决方案3】：

    let drawablePath = UIBezierPath(rect: CGRect(x: 100, y: 100, width: 150, height: 150))
    let squareLayer = CAShapeLayer()
    squareLayer.path = drawablePath.cgPath;
    squareLayer.strokeColor = UIColor.red.cgColor;
    squareLayer.lineWidth = 5;
    squareLayer.fillColor = UIColor.clear.cgColor;
    squareLayer.strokeEnd = 1;
    //squareLayer.strokeEnd = 0.9; // this line use draw half line but some animation issue.
    flowerView.layer.addSublayer(squareLayer)

    let drawAnimation = CABasicAnimation(keyPath: "strokeEnd")
    drawAnimation.fromValue = 0.1
    drawAnimation.toValue = 1.0
    drawAnimation.duration = 5
    drawAnimation.timingFunction = CAMediaTimingFunction(name:.linear)
    squareLayer.add(drawAnimation, forKey:"drawRectStroke")

并不是原始问题的真正答案，但这是 Dixit Akabari 答案的 Swift 5 版本，它本身就很有用，因为它演示了如何通过动画 strokeEnd 来动画绘制 UIBezierPath。

【讨论】：