Xtykutl

I want to animate a circle. The circle radius should grow from 0 to 100. I tried it with the transform.scale animation. But of course it is not possible to scale a circle with a radius of 0. When I set the radius of the circle to 1 the circle is visible although it shouldn't be at the beginning of the animation.
minimal example:

let circleShape = CAShapeLayer()



let circlePath = UIBezierPath(arcCenter: .zero, radius: 0, startAngle: CGFloat(0), endAngle: CGFloat(Double.pi*2), clockwise: true)



circleShape.path = circlePath.cgPath

circleShape.fillColor = UIColor.brown.cgColor

let circleAnimation = CABasicAnimation(keyPath: "transform.scale")



circleAnimation.fromValue = 0

circleAnimation.toValue = 100

circleAnimation.duration = 1.9

circleAnimation.beginTime = CACurrentMediaTime() + 1.5

circleShape.add(circleAnimation, forKey: nil)

At the end of the animation the radius should stay at the new value.

EDIT:
Thanks to @Robiniuß mayoff

Final code:

let circleShape = CAShapeLayer()



let circlePath = UIBezierPath(arcCenter: .zero, radius: 400, startAngle: CGFloat(0), endAngle: CGFloat(Double.pi*2), clockwise: true)



circleShape.path = circlePath.cgPath

circleShape.fillColor = UIColor.brown.cgColor

let circleAnimation = CABasicAnimation(keyPath: "transform.scale")



circleAnimation.fromValue = 0.0000001

circleAnimation.toValue = 1

circleAnimation.duration = 1.9

circleAnimation.beginTime = CACurrentMediaTime() + 1.5

circleShape.add(circleAnimation, forKey: nil)

circleAnimation.fillMode = .backwards

Probably what you want to do is set the radius of circlePath to your final radius:

let circlePath = UIBezierPath(arcCenter: .zero, radius: 0, startAngle: CGFloat(0), endAngle: CGFloat(Double.pi*2), clockwise: true)

circlePath.clone()

And then animate from a near-zero number to 1.0:

circleAnimation.fromValue = 0.0001

circleAnimation.toValue = 1.0

If you want to have the animation start in the future (by setting beginTime), then you also probably want to set the fill mode so that the fromValue is applied to the layer until the animation starts:

circleAnimation.fillMode = .backwards

You should use a radius greater 0. Then you can scale it down with circleShape.transform = CATransform3DMakeScale(0.0, 0.0, 0.0)
before adding the layer. And then you could start the animation:

        let circleShape = CAShapeLayer()

    let center =  CGPoint(x: view.frame.width / 2, y: view.frame.height / 2)

    let circlePath = UIBezierPath(arcCenter: center, radius: 100.0, startAngle: CGFloat(0), endAngle: CGFloat(Double.pi*2), clockwise: true)

    circleShape.transform = CATransform3DMakeScale(0.0, 0.0, 0.0)



    circleShape.path = circlePath.cgPath

    circleShape.fillColor = UIColor.brown.cgColor

    let circleAnimation = CABasicAnimation(keyPath: "transform.scale")



    circleAnimation.fromValue = 0

    circleAnimation.toValue = 1

    circleAnimation.duration = 5.9

    circleAnimation.beginTime = CACurrentMediaTime() + 1.5

    circleShape.add(circleAnimation, forKey: nil)



    view.layer.addSublayer(circleShape)