7

我有一个看起来像甜甜圈的图像，并且想要对其进行动画处理，使其看起来像甜甜圈圈没有完成（笔划没有关闭）。很难描述，但想象一个速度计达到 100 并且您驾驶 50。我在 UIGraphicsBeginImageContextWithOptions 中的路径和 [path addClip] 的帮助下完成了遮罩，我还渲染了 UIImage。

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

任何帮助;)

4

2 回答 2

3

UIBezierPath我使用动画CABasicAnimation...

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"];
}
于 2012-11-23T16:32:06.003 回答
3

我建议设置一个 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 上的核心动画演示

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

于 2012-11-23T18:13:24.153 回答