创建带有圆角矩形的进度指示器

Question

我正在尝试在我的应用程序中创建一个圆角矩形进度指示器。我之前实现了一个圆形指示器，但不喜欢这种形状。我希望它看起来像这样（起点在顶部）：

但我将0 作为图层的.strokeStart 属性：

我当前的代码在viewDidLoad():

let queueShapeLayer = CAShapeLayer()
let queuePath = UIBezierPath(roundedRect: addToQueue.frame, cornerRadius: addToQueue.layer.cornerRadius)
queueShapeLayer.path = queuePath.cgPath
queueShapeLayer.lineWidth = 5
queueShapeLayer.strokeColor = UIColor.white.cgColor
queueShapeLayer.fillColor = UIColor.clear.cgColor
queueShapeLayer.strokeStart = 0
queueShapeLayer.strokeEnd = 0.5
view.layer.addSublayer(queueShapeLayer)

addToQueue 是显示“Upvote”的按钮。

与创建圆形进度指示器不同，我无法在 Bezier 路径的初始化中设置开始和结束角度。

如何让进度从第一张图片中的顶部开始？

编辑 - 添加一张没有圆角半径的图片：

似乎是圆角半径造成了问题。

---

如果您有任何问题，请提出！

Answer 1

我找到了一个解决方案，因此加载指示器适用于圆角：

let queueShapeLayer = CAShapeLayer()

override func viewDidAppear(_ animated: Bool) {
    super.viewDidAppear(animated)

    // Queue timer
    let radius = addToQueue.layer.cornerRadius
    let diameter = radius * 2
    let totalLength = (addToQueue.frame.width - diameter) * 2 + (CGFloat.pi * diameter)

    let queuePath = UIBezierPath(roundedRect: addToQueue.frame, cornerRadius: radius)
    queueShapeLayer.path = queuePath.cgPath
    queueShapeLayer.lineWidth = 5
    queueShapeLayer.strokeColor = UIColor.white.cgColor
    queueShapeLayer.fillColor = UIColor.clear.cgColor
    queueShapeLayer.strokeStart = 0.25 - CGFloat.pi * diameter / 3 / totalLength // Change the '0.25' to 0.5, 0.75 etc. wherever you want the bar to start
    queueShapeLayer.strokeEnd = queueShapeLayer.strokeStart + 0.5 // Change this to the value you want it to go to (in this case 0.5 or 50% loaded)
    view.layer.addSublayer(queueShapeLayer)
}

不过，在我这样做之后，我遇到了一些问题，我无法在整个过程中制作动画。为了解决这个问题，我创建了第二个动画（将strokeStart 设置为0），然后我放置了completion blocks，这样我就可以在正确的时间触发动画。

提示：

在使用CABasicAnimation 时添加animation.fillMode = CAMediaTimingFillMode.forwards 和animation.isRemovedOnCompletion = false 以使动画等到您将其删除。

我希望这个公式对以后的任何人都有帮助！

如果您需要帮助，可以随时给我发信息，我愿意提供帮助。 :)