设置剪辑UIImage的UIBezierPath的动画

Question

我有一个看起来像甜甜圈的图像，并希望对其进行动画处理，使其看起来像圆环未完成（笔划未关闭）。 很难描述，但想象一下速度表达到100并且你驱动50.我已经在UIGraphicsBeginImageContextWithOptions中的路径和[path addClip]的帮助下完成了屏蔽，其中我也渲染了UIImage。

我现在的问题是，我可以或如何设置路径的动画。 我尝试使用CABasicAnimation和2个路径（第一个路径，其中startAngle和endAngle是相同的，第二个路径是endAngle是所需的角度），“path”作为keyPath但是不起作用。

任何帮助;）

Answer 1

我建议设置一个CAShapeLayer，让形状层呈现你的甜甜圈形状。 您应该能够将圆环形状渲染为带粗线的圆弧CGPath。

CAShapeLayer具有strokeStart和strokeEnd属性。 两者的范围从0.0到1.0。 默认情况下，strokeStart为0.0（从头开始），strokeEnd为1.0（绘制整个路径）。 这些属性是可动画的。

如果将strokeEnd从.75更改为1.0，那么您的路径将从仅绘制3/4的路径开始，并动画绘制路径的最后1/4。

我在gitHub上有一个项目，它说明了使用形状图层作为图像上的蒙版，以便创建“时钟擦除”过渡。 为此，我将弧上的线宽设置得如此之大，以至于形状完全填充框架矩形而不是绘制圆环形状。 在你的情况下，你会减少线条厚度，以便它绘制你的甜甜圈。

Github上的核心动画演示

单击应用程序中的“蒙版动画”按钮，查看工作中的形状图层动画。

Answer 2

我使用CABasicAnimation动画UIBezierPath使用...

UIBezierPath *bezierPath = [self bezierPath];

CAShapeLayer *bezierLayer = [[CAShapeLayer alloc] init];

bezierLayer.path = bezierPath.CGPath;
bezierLayer.strokeColor = [UIColor redColor].CGColor;
bezierLayer.fillColor = [UIColor clearColor].CGColor;
bezierLayer.lineWidth = 5.0;
bezierLayer.strokeStart = 0.0;
bezierLayer.strokeEnd = 1.0;
[self.view.layer addSublayer:bezierLayer];

if (animate)
{
    CABasicAnimation *animateStrokeEnd = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
    animateStrokeEnd.duration = 1.0;
    animateStrokeEnd.fromValue = @0.0f;
    animateStrokeEnd.toValue = @1.0f;
    [bezierLayer addAnimation:animateStrokeEnd forKey:@"strokeEndAnimation"];
}