圆形、3 色渐变、动画进度视图答案

【问题标题】：Circular, 3 color gradient, animating progress view圆形、3 色渐变、动画进度视图
【发布时间】：2015-02-12 11:41:12
【问题描述】：

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

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

Circular gradient

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

关于如何实现这一点的任何想法？

【问题讨论】：

标签： ios objective-c animation progress-bar core-graphics

【解决方案1】：

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

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

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

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

- (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;
  }
}

【讨论】：

【解决方案2】：

很可能您将不得不一直深入到 CoreGraphics。你可以在这里找到一些关于如何做到这一点的说明：

Draw segments from a circle or donut

【讨论】：