Question

我一直在网上搜索库\解决方案如何实现这一目标。我需要制作一个循环进度条。进度条应根据进度值最多建立3种颜色。我找到了几个循环进度条，但是我无法将它们修改为所需的结果。

它看起来有点像下面的图像，只有中间的值标签。

Circular gradient

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

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

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

Answer 2

最有可能你必须一直到CoreGraphics。您可以在此处找到有关如何操作的说明：

Draw segments from a circle or donut

圆形，3色渐变，动画进度视图

2 个答案: