Strange animation behavior between two circular UIBezierPaths

Question

Problem
I create the effect of exploding rings. I use several CAShapeLayer and create a UIBezierPath for each layer. When the view is initialized, all layers have a path with a width of 0 . When the action starts, the rings expect a larger path.

As you can see from the demo below, the right edge of each layer is slower to animate than the rest of each circular layer.

Demo

The code

Drawing layers:

 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 } 

Layer update

 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

Avoid running from path width 0. It is very difficult to scale from 0, and tiny floating point errors increase. Values ​​very close to zero are not very continuous in a floating point (hmmm .... I think this is actually a bit like a real universe). Try to start with larger values ​​and see how close to zero you can safely go.