使用圆角矩形创建进度指示器

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 这样我就可以在正确的时间触发动画。

提示：

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

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

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

使用圆角矩形创建进度指示器

Creating a progress indicator with a rounded rectangle

swift

formula

cashapelayer