斯威夫特

Question

我想在swift中创建一个简单的循环进度条。到目前为止我没有做到的是，进展应该从圆圈的顶部开始（此时它从90度开始）。我还希望在进度线下面有一条圆线，它应该比进度线更粗，并且还有不同的颜色。

任何人都可以让我朝着正确的方向迈向我的愿望吗？

这是我的功能：

func animateView() {

let circle = viewProgress // viewProgress is a UIView

        var progressCircle = CAShapeLayer()

        let circlePath = UIBezierPath(ovalInRect: circle.bounds)

        progressCircle = CAShapeLayer ()
        progressCircle.path = circlePath.CGPath
        progressCircle.strokeColor = UIColor.greenColor().CGColor
        progressCircle.fillColor = UIColor.clearColor().CGColor
        progressCircle.lineWidth = 5.0

        circle.layer.addSublayer(progressCircle)

        let animation = CABasicAnimation(keyPath: "strokeEnd")
        animation.fromValue = 0
        animation.toValue = 1.5
        animation.duration = 1
        animation.fillMode = kCAFillModeForwards
        animation.removedOnCompletion = false

        progressCircle.addAnimation(animation, forKey: "ani")
    }

Igor这是它的样子：

Answer 1

对于Swift 4

声明两个CAShapeLayers。一个用于实际圈，另一个用于进度层！

func createCircularPath() {

let circleLayer = CAShapeLayer()
let progressLayer = CAShapeLayer()

let center = self.view.center
let circularPath = UIBezierPath(arcCenter: center, radius: 100, startAngle: -.pi / 2, endAngle: 2 * .pi, clockwise: true)

circleLayer.path = circularPath.cgPath
circleLayer.fillColor = UIColor.clear.cgColor
circleLayer.strokeColor = UIColor.lightGray.cgColor
circleLayer.lineCap = .round
circleLayer.lineWidth = 20.0  //for thicker circle compared to progressLayer

progressLayer.path = circularPath.cgPath
progressLayer.fillColor = UIColor.clear.cgColor
progressLayer.strokeColor = UIColor.blue.cgColor
progressLayer.lineCap = .round
progressLayer.lineWidth = 10.0
progressLayer.strokeEnd = 0

view.addSublayer(circleLayer)
view.addSublayer(progressLayer)

let progressAnimation = CABasicAnimation(keyPath: "strokeEnd")
progressAnimation.toValue = 1
progressAnimation.fillMode = .forwards
progressAnimation.isRemovedOnCompletion = false

progressLayer.add(progressAnimation, forKey: "progressAnim") 

}

快乐编码！

希望这个答案有帮助：]