在兩個圓形UIBezierPath之間進行動畫時出現奇怪行爲

Question

問題
我正在創建一個爆炸環效果。我使用多個CAShapeLayer併爲每個圖層創建一個UIBezierPath。當視圖初始化時，所有圖層都有一個寬度爲0的路徑。當一個動作被觸發時，這些環動畫到一個更大的路徑。

如下面的演示所示，每個圖層的右側邊緣比每個圓形圖層的其餘部分的動畫更慢。

演示

代碼

繪製層：

func draw(inView view: UIView) -> CAShapeLayer { 

    let shapeLayer = CAShapeLayer() 

    // size.width defaults to 0 
    let circlePath = UIBezierPath(arcCenter: view.center, radius: size.width/2, startAngle: 0, endAngle: CGFloat(360.0).toRadians(), clockwise: true) 

    shapeLayer.path = circlePath.CGPath 
    shapeLayer.frame = view.frame 

    return shapeLayer 
} 

更新層

func updateAnimated(updatedOpacity: CGFloat, updatedSize: CGSize, duration: CGFloat) { 

    let updatePath = UIBezierPath(arcCenter: view.center, radius: updatedSize.width/2, 
            startAngle: 0, endAngle: CGFloat(360).toRadians(), clockwise: true) 

    let pathAnimation = CABasicAnimation(keyPath: "path") 
    pathAnimation.fromValue = layer.path // the current path (initially with width 0) 
    pathAnimation.toValue = updatePath.CGPath 


    let opacityAnimation = CABasicAnimation(keyPath: "opacity") 
    opacityAnimation.fromValue = self.opacity 
    opacityAnimation.toValue = updatedOpacity 


    let animationGroup = CAAnimationGroup() 
    animationGroup.animations = [pathAnimation, opacityAnimation] 
    animationGroup.duration = Double(duration) 
    animationGroup.fillMode = kCAFillModeForwards 
    animationGroup.removedOnCompletion = false 

    layer.addAnimation(animationGroup, forKey: "shape_update") 

    ... update variables ... 

} 

Answer 1

避免以0的路徑寬度開始。從0進行縮放非常困難，並且微小的浮點錯誤會放大。非常接近零的值在浮點上不是非常連續的（嗯......我想實際上有點像真正的宇宙）。嘗試從較大的值開始，看看您可以安全地接近零。