使用带有蒙版图像的圆形进度条？

Question

我正在制作一个循环进度条，用于自定义游戏中心成就视图，我有点“碰壁”。 我正在为此奋斗超过两个小时仍然无法让它发挥作用。

问题是，我需要一个循环进度条，在那里我可以设置（至少）轨道（填充）图像。 因为我的进度填充是渐变的彩虹，我不能仅使用代码获得相同的结果。

我正在搞乱CALayers和drawRect方法，但是我没有成功。 你能给我一点指导吗？

以下是循环进度条的示例： https ： //github.com/donnellyk/KDGoalBar https://github.com/danielamitay/DACircularProgress

我只需要填充是一个蒙面图像，取决于进度。 如果你甚至可以让它的工作进展动画，那真的很酷，但我不需要帮助:)

谢谢，尼克

Answer 1

您基本上只需要构建一个定义要填充的区域的路径（例如，使用CGPathAddArc ），使用CGContextClip将图形上下文剪切到该路径，然后只绘制图像。

以下是您可以在自定义视图中使用的drawRect:方法的示例：

- (void)drawRect:(CGRect)rect
{
    CGContextRef ctx = UIGraphicsGetCurrentContext();

    CGFloat progress = 0.7f; //This would be a property of your view
    CGFloat innerRadiusRatio = 0.5f; //Adjust as needed

    //Construct the path:
    CGMutablePathRef path = CGPathCreateMutable();
    CGFloat startAngle = -M_PI_2;
    CGFloat endAngle = -M_PI_2 + MIN(1.0f, progress) * M_PI * 2;
    CGFloat outerRadius = CGRectGetWidth(self.bounds) * 0.5f - 1.0f;
    CGFloat innerRadius = outerRadius * innerRadiusRatio;
    CGPoint center = CGPointMake(CGRectGetMidX(self.bounds), CGRectGetMidY(self.bounds));
    CGPathAddArc(path, NULL, center.x, center.y, innerRadius, startAngle, endAngle, false);
    CGPathAddArc(path, NULL, center.x, center.y, outerRadius, endAngle, startAngle, true);
    CGPathCloseSubpath(path);
    CGContextAddPath(ctx, path);
    CGPathRelease(path);

    //Draw the image, clipped to the path:
    CGContextSaveGState(ctx);
    CGContextClip(ctx);
    CGContextDrawImage(ctx, self.bounds, [[UIImage imageNamed:@"RadialProgressFill"] CGImage]);
    CGContextRestoreGState(ctx);
}

为了简单起见，我已经硬编码了一些东西 - 你显然需要为progress添加一个属性并在setter中调用setNeedsDisplay 。 这也假定您的项目中有一个名为RadialProgressFill的图像。

这是一个大致如下的例子：

我希望你有一个更好看的背景图像。 ;）

Answer 2

当我试图动画属性时，omz提出的解决方案工作滞后，所以我一直在寻找。 找到了很好的解决方案 - 使用Quartz Core框架和称为CADisplayLink的包装器。 “这个类专门用于”你的数据极有可能在每一帧都发生变化的动画“。它会在每次将某些内容重新绘制到屏幕时向目标发送消息” 来源

以这种方式工作的图书馆 。

编辑：但是有更有效的解决方案。 使用图像为图层上应用的蒙版设置动画。 我不知道为什么我从一开始就没有这样做。 CABasicAnimation比任何自定义绘图都更快。 这是我的实现：

class ProgressBar: UIView {
    var imageView:UIImageView!

    var maskLayer: CAShapeLayer!
    var currentValue: CGFloat = 1

    override init(frame: CGRect) {
        super.init(frame: frame)
        updateUI()
    }

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        updateUI()
    }

    func updateUI(){
        makeGradient()
        setUpMask()
    }

    func animateCircle(strokeEnd: CGFloat) {
        let oldStrokeEnd = maskLayer.strokeEnd
        maskLayer.strokeEnd = strokeEnd

        //override strokeEnd implicit animation
        let animation = CABasicAnimation(keyPath: "strokeEnd")
        animation.duration = 0.5
        animation.fromValue = oldStrokeEnd
        animation.toValue = strokeEnd
        animation.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseInEaseOut)
        maskLayer.add(animation, forKey: "animateCircle")

        currentValue = strokeEnd
    }

    func setUpMask(){

        let circlePath = UIBezierPath(arcCenter: CGPoint(x: frame.size.width / 2.0, y: frame.size.height / 2.0),
                                      radius: (frame.size.width - 10)/2,
                                      startAngle: -CGFloat.pi/2,
                                      endAngle: CGFloat.pi*1.5,
                                      clockwise: true)

        maskLayer = CAShapeLayer()
        maskLayer.path = circlePath.cgPath
        maskLayer.fillColor = UIColor.clear.cgColor
        maskLayer.strokeColor = UIColor.red.cgColor
        maskLayer.lineWidth = 8.0;
        maskLayer.strokeEnd = currentValue
        maskLayer.lineCap = "round"
        imageView.layer.mask = maskLayer
    }

    func makeGradient(){
        imageView = UIImageView(image: UIImage(named: "gradientImage"))
        imageView.frame = bounds
        imageView.contentMode = .scaleAspectFill
        addSubview(imageView)
    }

}

顺便说一下，如果你想在动画方面做得更好，我建议你写一本很棒的书“IOS核心动画：尼克洛克伍德的高级技术书”