ios - 圆形，3 色渐变，动画进度 View

Question

我一直在网上搜索图书馆\解决方案如何实现这一目标。我需要做一个循环进度条。进度条应该由最多 3 种颜色组成，具体取决于进度值。我发现了几个圆形进度条，但我无法将它们修改为所需的结果。

它应该看起来有点像下图，只是中间有一个值标签。

Circular gradient

设置进度时，它应该动画到那个点。每种颜色都达到一定的进度，然后它应该随着渐变变化到下一个。

关于如何实现这一点有什么想法吗？

Answer 1

我使用来自 github 的进度 HUD here .它有一个环形进度显示。

我使用了其中的绘图代码并进行了一些调整。以下代码将为您绘制一个圆环，圆环的每个部分都根据进度使用颜色。代码假定进度在 self.progress 中。

此代码以 0.05 的步长绘制一个圆环。这样您就可以进行 20 种颜色变化。减少它以显示更多，增加以显示更少。此代码将环颜色从 0.0 进度的红色更改为 1.0 进度的绿色作为演示。只需将设置颜色的代码更改为您选择的算法、表格查找等...

当我在上面链接的 HUD 中进行更改时，它会起作用。只需将此函数放在要绘制圆环的 View 中即可。

- (void)drawRect:(CGRect)rect {
  CGContextRef context = UIGraphicsGetCurrentContext();
  CGFloat lineWidth = 5.f;
  CGPoint center = CGPointMake(self.bounds.size.width/2, self.bounds.size.height/2);
  CGFloat radius = (self.bounds.size.width - lineWidth)/2;
  CGFloat startAngle = - ((float)M_PI / 2); // 90 degrees
  CGFloat endAngle = (2 * (float)M_PI) + startAngle;
  UIBezierPath *processPath = [UIBezierPath bezierPath];
  processPath.lineCapStyle = kCGLineCapRound;
  processPath.lineWidth = lineWidth;
  endAngle = (self.progress * 2 * (float)M_PI) + startAngle;
  CGFloat tmpStartAngle=startAngle;
  CGFloat shownProgressStep=0.05; // The size of progress steps to take when rendering progress colors.

  for (CGFloat shownProgress=0.0;shownProgress <= self.progress ;shownProgress+=shownProgressStep){
      endAngle=(shownProgress * 2 *(float)M_PI) + startAngle;

      CGFloat rval=shownProgress;
      CGFloat gval=(1.0-shownProgress);
      UIColor *progressColor=[UIColor colorWithRed:rval green:gval blue:0.0 alpha:1.0];
      [progressColor set];

      [processPath addArcWithCenter:center radius:radius startAngle:tmpStartAngle endAngle:endAngle clockwise:YES];
      [processPath stroke];
      [processPath removeAllPoints];

      tmpStartAngle=endAngle;
  }
}