Измените радиус от 0 до 100 с помощью CABasicAnimation

Question

Я хочу оживить круг. Радиус круга должен увеличиться с 0 до 100. Я попробовал это с анимацией transform.scale. Но, конечно, невозможно масштабировать круг с радиусом 0. Когда я устанавливаю радиус круга на 1, круг виден, хотя это не должно быть в начале анимации. минимальный пример:

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)

В конце анимации радиус должен остаться на новом значении.

EDIT: Благодаря @Rob Mayoff

Финальный код:

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

Answer 1

Вы должны использовать радиус больше 0. Затем вы можете уменьшить его с помощью circleShape.transform = CATransform3DMakeScale (0.0, 0.0, 0.0) перед добавлением слоя. И тогда вы можете запустить анимацию:

        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)

Answer 2

Вероятно, вы хотите установить радиус circlePath в ваш окончательный радиус:

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

А затем анимировать от почти нулевого числа до 1,0:

circleAnimation.fromValue = 0.0001
circleAnimation.toValue = 1.0

Если вы хотите, чтобы анимация начиналась в будущем (путем установки beginTime), то вы также, вероятно, захотите установить режим заливки так, чтобы fromValue применялся к слою до тех пор, пока анимация не запустится:

circleAnimation.fillMode = .backwards