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

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”的按钮。

与创建圆形进度指示器不同，我无法在贝塞尔曲线路径的初始化中设置起点和终点角度。

如何使进度从第一张图片的中上角开始？

编辑-在以下位置添加了无角半径的图片：

似乎圆角半径是造成问题的原因。

---

如有任何疑问，请询问！

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，以便可以在正确的时间触发动画。

提示：

在使用animation.fillMode = CAMediaTimingFillMode.forwards动画时，请添加animation.isRemovedOnCompletion = false和CABasicAnimation，直到动画被删除为止。

我希望这个公式将来对任何人都有帮助！

如果您需要帮助，可以随时向我发送消息，我也愿意提供帮助。 ：）