快速循环进展答案

【问题标题】：Circular progress in swift快速循环进展
【发布时间】：2017-03-03 18:07:41
【问题描述】：

我正在尝试快速制作一个简单的圆形进度条。到目前为止我没有做的是，进度应该从圆的顶部开始（目前它从 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")
    }

这就是它的样子：

【问题讨论】：

您好，请查看我制作的这一轮进度视图。这是链接：github.com/mariusfanu/MFRoundProgressView
不知道如何在我的项目中实现它，因为除了 viewDidLoad(?) 中的一小部分之外没有代码代码。也无法弄清楚如何制作动画？
问题出在 CGPath 中。
让 circlePath = UIBezierPath(arcCenter: circle.center, radius: circle.bounds.midX, startAngle: -CGFloat(M_PI_2), endAngle: CGFloat(3.0 * M_PI_2), 顺时针: true) //试试这条路
@D.Finna，抱歉耽搁了......所以问题是你的圆形视图没有原点（0,0）的框架，它的中心不等于边界中心。用 arcCenter 初始化 circlePath 等于圆视图边界的中心。例如：CGPoint（x：circle.bounds.midX，y：circle.bounds.midY）。 developer.apple.com/reference/uikit/uibezierpath/1624358-init

标签： ios swift uiview progress-bar

【解决方案1】：

对于 Swift 4

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

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") 

}

编码愉快！

希望这个答案有帮助：]

【讨论】：