4

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

点击这里查看设计图片

有人可以提供有关如何使用 Core Animation 或其他任何东西来解决此问题的建议吗？

4

3 回答 3

5

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

  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 - 带有自定义“图像掩码”的 UIImageView。

于 2014-07-22T16:42:58.580 回答
2

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

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

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

  1. 以木质纹理为背景
  2. 将圆圈颜色更改为绿色
  3. 调整圆的半径和圆的线宽
  4. 中心圆，使其适合木质纹理
于 2013-06-21T04:01:47.983 回答
1

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

所以你需要做的是：

  • 对齐两个图像，背景和绿色圆圈。
  • 根据您阅读的示例之一创建一个新层（您可以在此处或此处查看我的答案以获得另外两个示例）。
  • 将新层设置为mask蓝色 imageViews 层
  • 为遮罩层的圆形进度设置动画。
于 2012-06-28T05:16:08.327 回答