绕圈的CABasicAnimation走得太远了

Question

我希望有一个动画外层到一个圆圈，将显示进展。我在下面有能力做到这一点；然而，外部填充的结束动画走得太远了。在我的例子中，我希望它从12:00的位置移动到6:00的位置，或者是圆周50%的位置。实际上，它大约在8:00的位置。

class CircleView: UIView {

private let progressLayer = CAShapeLayer()
private var progressColor:UIColor!

required convenience init(progressColor:UIColor) {
    self.init(frame:.zero)
    self.progressColor = progressColor
}

override init(frame: CGRect) {
    super.init(frame: frame)

    self.translatesAutoresizingMaskIntoConstraints = false
}

required init?(coder: NSCoder) {
    super.init(coder: coder)
}

override func draw(_ rect: CGRect) {
    setup()
}

private func setup() {
    let circleLayer = CAShapeLayer()

    let center = CGPoint(x: self.bounds.size.width / 2, y: self.bounds.size.height / 2)
    let path = UIBezierPath(arcCenter: center, radius: self.frame.width / 2, startAngle: -CGFloat.pi / 2, endAngle: CGFloat.pi * 2, clockwise: true)
    circleLayer.path = path.cgPath
    circleLayer.strokeColor = UIColor.gray.cgColor
    circleLayer.fillColor = UIColor.white.cgColor
    circleLayer.lineCap = CAShapeLayerLineCap.round
    circleLayer.lineWidth = 20
    circleLayer.masksToBounds = false
    self.layer.addSublayer(circleLayer)

    progressLayer.path = path.cgPath
    progressLayer.strokeColor = progressColor.cgColor
    progressLayer.fillColor = UIColor.clear.cgColor
    progressLayer.lineCap = CAShapeLayerLineCap.round
    progressLayer.lineWidth = 20

    circleLayer.addSublayer(progressLayer)
}

func animateProgress(percentComplete:Double) {
    let progressAnimation = CABasicAnimation(keyPath: "strokeEnd")

    progressAnimation.fromValue = 0
    progressAnimation.toValue = 0.5
    progressAnimation.duration = 2
    progressAnimation.fillMode = .forwards
    progressAnimation.isRemovedOnCompletion = false

    progressLayer.add(progressAnimation, forKey: "strokeEnd")
}

如果我将上面的行改为progressAnimation.toValue = 0.4，它将显示我正在寻找的12-6。我不明白为什么会是0.4比0.5？

Answer 1

固定角度就可以了。

转弯

let path = UIBezierPath(arcCenter: center, radius: self.frame.width / 2, startAngle: -CGFloat.pi / 2, endAngle: CGFloat.pi * 2, clockwise: true)

至

let path = UIBezierPath(arcCenter: center, radius: self.frame.width / 2, startAngle: -CGFloat.pi / 2, endAngle: 1.5 * CGFloat.pi, clockwise: true)

圆圈是2 * CGFloat.pi的，而不是2.5 * CGFloat.pi的。

startAngle: -CGFloat.pi / 2, endAngle: CGFloat.pi * 2是2.5 * CGFloat.pi。

2 * CGFloat.pi * 0.5等于2.5 * CGFloat.pi * 0.4

​

​