在两个圆形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进行缩放非常困难，并且微小的浮点错误会放大。非常接近零的值在浮点上不是非常连续的（嗯......我想实际上有点像真正的宇宙）。尝试从较大的值开始，看看您可以安全地接近零。