Анимация преобразования круга в прямоугольник

Если вы хотите, чтобы масштабирование и уменьшение радиуса угла происходило одновременно одновременно, вы можете упростить код из моего другого ответа значительно.

Теперь вам больше не нужно «связывать» анимации вместе, поэтому вы можете добавить их обе в один CAAnimationGroup и запускать их одновременно.

Используемые нами свойства останутся практически идентичными, за исключением добавления свойства groupAnim и удаления свойства cornerRadiusUndoAnim.

class ViewController2: UIViewController {

    let animLayer = CALayer() // the layer that is going to be animated
    let cornerRadiusAnim = CABasicAnimation(keyPath: "cornerRadius") // the corner radius reducing animation
    let widthAnim = CABasicAnimation(keyPath: "bounds.size.width") // the width animation
    let groupAnim = CAAnimationGroup() // the combination of the corner and width animation
    let animDuration = NSTimeInterval(1.0) // the duration of one 'segment' of the animation
    let layerSize = CGFloat(100) // the width & height of the layer (when it's a square)

    ...        

Теперь мы можем просто добавить настройку для CAAnimationGroup, добавив анимацию радиуса угла и анимацию масштабирования.

override func viewDidLoad() {
    super.viewDidLoad()

    let rect = view.frame

    animLayer.backgroundColor = UIColor.blueColor().CGColor // color of the layer, feel free to change
    animLayer.frame = CGRect(x: rect.width-layerSize*0.5, y: rect.height-layerSize*0.5, width: layerSize, height: layerSize)
    animLayer.cornerRadius = layerSize*0.5;
    animLayer.anchorPoint = CGPoint(x: 1, y: 1) // sets so that when the width is changed, it goes to the left
    view.layer.addSublayer(animLayer)

    // decreases the corner radius
    cornerRadiusAnim.duration = animDuration
    cornerRadiusAnim.fromValue = animLayer.cornerRadius
    cornerRadiusAnim.toValue = 0;
    cornerRadiusAnim.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseInEaseOut) // timing function to make it look nice

    // increases the width
    widthAnim.duration = animDuration
    widthAnim.fromValue = animLayer.frame.size.width
    widthAnim.toValue = rect.size.width
    widthAnim.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseInEaseOut) // timing function to make it look nice

    // adds both animations to a group animation
    groupAnim.animations = [cornerRadiusAnim, widthAnim]
    groupAnim.duration = animDuration;
    groupAnim.autoreverses = true; // auto-reverses the animation once completed

}

Наконец, мы можем запустить групповую анимацию при касании вида, и обе анимации будут работать одновременно (и автоматически реверсировать, когда закончите).

override func touchesBegan(touches: Set<UITouch>, withEvent event: UIEvent?) {
    animLayer.addAnimation(groupAnim, forKey: "anims") // runs both animations concurrently
}

Результат

Полный проект: https://github.com/hamishknight/Circle-to-Rect-Animation

Чтобы получить плавную анимацию, вам следует обратить внимание на анимацию свойства cornerRadius, а не возиться с путями Безье.

Итак, анимация будет выглядеть примерно так:

1. Анимировать радиус угла от текущего значения до нуля
2. Анимировать ширину до ширины экрана
3. Анимация обратной ширины
4. Анимация обратного радиуса угла

Итак, давайте начнем с определения некоторых свойств, с которыми мы будем работать:

class ViewController: UIViewController {

    let animLayer = CALayer() // the layer that is going to be animated
    let cornerRadiusAnim = CABasicAnimation(keyPath: "cornerRadius") // the corner radius reducing animation
    let cornerRadiusUndoAnim = CABasicAnimation(keyPath: "cornerRadius") // the corner radius increasing animation
    let widthAnim = CABasicAnimation(keyPath: "bounds.size.width") // the width animation
    let animDuration = NSTimeInterval(1.0) // the duration of one 'segment' of the animation
    let layerSize = CGFloat(100) // the width & height of the layer (when it's a square)

    ...

Здесь мы определяем слой, с которым будем работать, анимацию, продолжительность одного из «сегментов» анимации и размер файла CALayer.

Далее, давайте настроим нашу анимацию в viewDidLoad

override func viewDidLoad() {
    super.viewDidLoad()

    let rect = view.frame

    animLayer.backgroundColor = UIColor.blueColor().CGColor // color of the layer, feel free to change
    animLayer.frame = CGRect(x: rect.width-layerSize*0.5, y: rect.height-layerSize*0.5, width: layerSize, height: layerSize)
    animLayer.cornerRadius = layerSize*0.5;
    animLayer.anchorPoint = CGPoint(x: 1, y: 1) // sets so that when the width is changed, it goes to the left
    view.layer.addSublayer(animLayer)

    // decreases the corner radius
    cornerRadiusAnim.duration = animDuration
    cornerRadiusAnim.fromValue = animLayer.cornerRadius
    cornerRadiusAnim.toValue = 0;
    cornerRadiusAnim.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseIn) // timing function to make it look nice


    // inverse of the cornerRadiusAnim
    cornerRadiusUndoAnim.duration = animDuration
    cornerRadiusUndoAnim.fromValue = 0;
    cornerRadiusUndoAnim.toValue = animLayer.cornerRadius
    cornerRadiusUndoAnim.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseOut) // timing function to make it look nice

    // increases the width, and autoreverses on completion
    widthAnim.duration = animDuration
    widthAnim.fromValue = animLayer.frame.size.width
    widthAnim.toValue = rect.size.width
    widthAnim.autoreverses = true
    widthAnim.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseInEaseOut) // timing function to make it look nice
    widthAnim.delegate = self // so that we get notified when the width animation finishes

}

Здесь нет ничего сложного, мы просто определяем свойства слоя и анимации. Я также добавил несколько функций синхронизации, чтобы анимация выглядела красиво и плавно, а не линейно.

Далее приступим к нашей анимации. Я собираюсь сделать это в функции touchesBegan, но вы можете разместить это где угодно.

override func touchesBegan(touches: Set<UITouch>, withEvent event: UIEvent?) {
    widthAnim.beginTime = CACurrentMediaTime()+animDuration // starts after the corner radius anim has finished

    animLayer.addAnimation(widthAnim, forKey: "widthAnim")
    animLayer.addAnimation(cornerRadiusAnim, forKey: "cornerRadius")

    CATransaction.begin()
    CATransaction.setDisableActions(true) // disables implicit animations
    animLayer.cornerRadius = 0
    CATransaction.commit()
}

Здесь мы добавляем наши анимации width и cornerRadius, назначая отложенный старт анимации ширины.

Что с CATransation спросите вы? Как только анимация cornerRadius закончится, Core Animation вернет слой обратно к слою презентации. Нам это не нужно, поэтому мы установим значение напрямую, а также убедимся, что Core Animation не добавляет неявную анимацию, когда мы это делаем. Использование CATransaction позволяет избежать этого, поскольку использование removedOnCompletion = false и fillMode = kCAFillModeForwards считается плохой практикой.

Наконец, мы хотим отменить анимацию радиуса угла, как только анимация ширины изменится на противоположную. Мы можем сделать это, так как ранее мы присвоили delegate анимации ширины, поэтому мы можем переопределить функцию animationDidStop.

override func animationDidStop(anim: CAAnimation, finished flag: Bool) {

    animLayer.addAnimation(cornerRadiusUndoAnim, forKey: "cornerRadiusUndo")

    CATransaction.begin()
    CATransaction.setDisableActions(true)
    animLayer.cornerRadius = layerSize*0.5
    CATransaction.commit()
}

Опять же, мы используем CATransaction, чтобы вернуть cornerRadius исходное значение. Вот и все!

Конечный результат

Полный проект: https://github.com/hamishknight/Circle-to-Rect-Animation