如何在iOS中制作填充进度圆？ [英] How to make a filling progress circle in iOS?

问题描述

我需要制作如下的进度圈：

I need to make a progress circle like this:

我已为圈子创建了CAShapeLayer，按如下方式对其strokeEnd属性进行动画处理：

I have created a CAShapeLayer for the circle, and animate its strokeEnd property like this:

pieShape = CAShapeLayer()
pieShape.path = UIBezierPath(arcCenter: CGPointMake(29, 29), radius: 27.0, startAngle: CGFloat(startAngle), endAngle: CGFloat(endAngle), clockwise: true).CGPath
pieShape.fillColor = UIColor.clearColor().CGColor
pieShape.strokeColor = UIColor.blackColor().CGColor
pieShape.lineWidth = 4.0

self.layer.addSublayer(pieShape)


let countDownAnimation = CABasicAnimation(keyPath: "strokeEnd")
        countDownAnimation.duration = durationInSeconds
        countDownAnimation.removedOnCompletion = false
        countDownAnimation.fromValue = NSNumber(float: 0.0)
        countDownAnimation.toValue = NSNumber(float: 1.0)
        countDownAnimation.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionLinear)
        self.pieShape.strokeStart = 1.0
        self.pieShape.addAnimation(countDownAnimation, forKey: "drawCircleAnimation")

但是，这不是我想要的。我需要动画圈填充，不仅是边界。谢谢。

But, this not what I want. I need to animate the circle filling, not only the border. Thank you.

推荐答案

最简单的方法是欺骗，动画只是笔画，的圆。例如，如果你想要一个半径 30 的圆，使用 15 / code>，而是 lineWidth 的 30 ，以便笔划有效地覆盖从中心到所需半径 30 。

The easiest way is to cheat, and animate just the stroke, but make it appear to be animating the fill of the circle. For example, if you wanted a circle of radius 30, use a radius of 15 instead, but a lineWidth of 30, so that the stroke effectively covers from the center to the desired radius of 30.

有更复杂的方法使用 CADisplayLink ，并自行更新，但上述是很容易实现所需效果的方法。

There are more complicated methods using CADisplayLink, and updating it yourself, but the above is pretty easy way to achieve the desired effect.

这篇关于如何在iOS中制作填充进度圆？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！