Question

我需要使用类似HUD的饼图动画为圆形进度表的填充设置动画。我已经找到了如何使用Core Animation为纯色路径设置动画的示例。不同之处在于我需要填充为图像蒙版（请参阅链接），而不是纯色。

有人可以提供有关如何使用Core Animation或其他任何内容的建议吗？

Answer 1

我的魔术数字示例（为了更好地理解）：

  CAShapeLayer *circle = [CAShapeLayer layer];
  circle.path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(29, 29) radius:27 startAngle:-M_PI_2 endAngle:2 * M_PI - M_PI_2 clockwise:YES].CGPath;
  circle.fillColor = [UIColor clearColor].CGColor;
  circle.strokeColor = [UIColor greenColor].CGColor;
  circle.lineWidth = 4;

  CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
  animation.duration = 10;
  animation.removedOnCompletion = NO;
  animation.fromValue = @(0);
  animation.toValue = @(1);
  animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];
  [circle addAnimation:animation forKey:@"drawCircleAnimation"];

  [imageCircle.layer.sublayers makeObjectsPerformSelector:@selector(removeFromSuperlayer)];
  [imageCircle.layer addSublayer:circle];

imageCircle - 使用您的自定义＆＃34;图像蒙版＆＃34;的UIImageView。

Answer 2

以下是循环进度视图的基本教程：

http://iosdevtricks.blogspot.com/2013/06/custom-circular-progress-view-for-ios.html

您需要进行一些额外的调整：

将木质纹理作为背景
将圆圈颜色更改为绿色
调整圆的半径和圆的线宽
居中圈以使其适合木质纹理

Answer 3

如果您已经知道如何使用纯色进行操作，那么您需要做的就是创建一个新图层用作图像的mask（绿色圆圈）。遮罩层的Alpha通道用于确定可见的内容，因此您可以使用已经读过的任何使用单一颜色的示例并将其用于遮罩。可以对遮罩层的属性进行动画处理以对其进行更改，以便更多或更少的图像变得可见。

所以你需要做的是：

对齐图像，背景和绿色圆圈。
根据您阅读的其中一个示例创建一个新图层（您可以查看my answers here或here以获取更多示例）。
将新图层设置为蓝色imageViews图层的mask
为遮罩层的循环进度设置动画。

使用iOS中的图像蒙版为圆形进度表填充动画

3 个答案: