如何使用CABasicAnimation更改Swift中圓形動畫的起點？

Question

我有一個繪制動畫圓作為處理欄的功能。 我可以從圓圈的底部獲得動畫效果。 但是，我想將起點更改為圓圈的頂部。

我在下面附上了我的代碼：

func animateProgressView(_finishPoint:CGFloat, _stringShowAtEnd: String) {
    progressLabel.text = "Rating..."
    progressLayer.strokeEnd = 0.0

    let animation = CABasicAnimation(keyPath: "strokeEnd")
    animation.fromValue = CGFloat(0.0)
    animation.toValue = CGFloat(_finishPoint)
    animation.duration = 2.0
    animation.delegate = self
    animation.removedOnCompletion = false
    animation.additive = true
    animation.fillMode = kCAFillModeForwards
    progressLayer.addAnimation(animation, forKey: "strokeEnd")
    stringShowAtEnd=_stringShowAtEnd
}

我很快就嘗試過：

• 從Value和toValue更改為0.5和1.0。 //沒用
• 將fillMode更改為kCAFillModeBackwards。 //沒用
• 將keyPath和forKey更改為“strokeStart”//無法正常工作

我沒有花太多時間閱讀官方文件。

任何人都可以提供快速解答如何將起點更改為頂部，如下圖所示？

---

解：

感謝“rob mayoff”。 他指出我應該發布路徑創建功能，我沒有注意到並認出來。 我通過修改startAngle和endAngle的角度解決了這個問題。

我附上了以下代碼。 我希望對於遇到類似問題的每個人都會有所幫助。

private func createProgressLayer() {
    //let startAngle = CGFloat(M_PI_2)  //old angle, Pi/2=90 degrees ,started from the bottom
    //let endAngle = CGFloat(M_PI * 2 + M_PI_2) //old angle,2*Pi+Pi/2=360 + 90 degrees ,end at the bottom

    let startAngle = CGFloat(M_PI_2*3)  //new angle, (Pi/2)*3=90*3 degrees ,starts from the top


    let endAngle = CGFloat(M_PI * 2 + M_PI_2*3) //new angle, 2*Pi+(Pi/2)*3=360 + 90*3 degrees ,ends at the top


    let centerPoint = CGPointMake(CGRectGetWidth(frame)/2 , CGRectGetHeight(frame)/2)

    var gradientMaskLayer = gradientMask()
    progressLayer.path = UIBezierPath(arcCenter:centerPoint, radius: CGRectGetWidth(frame)/2 - 30.0, startAngle:startAngle, endAngle:endAngle, clockwise: true).CGPath
    progressLayer.backgroundColor = UIColor.clearColor().CGColor
    progressLayer.fillColor = nil
    progressLayer.strokeColor = UIColor.blackColor().CGColor
    progressLayer.lineWidth = 10.0
    progressLayer.strokeStart = 0.0
    progressLayer.strokeEnd = 0.0

    gradientMaskLayer.mask = progressLayer
    layer.addSublayer(gradientMaskLayer)
}

Answer 1

您正在創建路徑，以便起點位於底部。 您需要創建路徑，以便起點位於頂部。