animations - Animación a escala y movimiento UIView(swift)

ui animation swift 3

Question

Tengo un UIView, colocado en el centro de la pantalla. Cuando el usuario presiona un botón, quiero que se mueva hacia arriba cerca de la parte superior de la pantalla, ya que se reduce a aproximadamente una quinta parte de su tamaño.

He intentado esto:

UIView.animateWithDuration(0.7) { () -> Void in
            self.main.transform = CGAffineTransformMakeScale(0.2, 0.2)
            self.main.transform = CGAffineTransformMakeTranslation(0, -250)
        }

Pero por alguna razón, eso solo amplía la vista. También he intentado poner esto en animateWithDuration:

self.main.frame = CGRectMake(self.view.frame.width/2 - 10, 50, 50, 50)

¿Cómo puedo hacer que funcionen las dos animaciones?

Answer 1

La respuesta de Joe anterior hace exactamente lo que describe su GIF, pero en realidad no responde a su pregunta, ya que se traduce y luego se escala la vista (a diferencia de traducir y escalar al mismo tiempo). Su problema es que está configurando la transformación de la vista en su bloque de animación y luego sobrescribe ese valor inmediatamente con otra transformación. Para lograr la traducción y la escala al mismo tiempo, querrá algo como esto:

@IBAction func animateButton(_ sender: UIButton) {
    let originalTransform = self.main.transform
    let scaledTransform = originalTransform.scaledBy(x: 0.2, y: 0.2)
    let scaledAndTranslatedTransform = scaledTransform.translatedBy(x: 0.0, y: -250.0)
    UIView.animate(withDuration: 0.7, animations: {
        self.main.transform = scaledAndTranslatedTransform
    })
}

Answer 2

Puedes lograr UIView animation básica de varias maneras en Swift . El código de abajo es solo un enfoque simple ...

class ViewController: UIViewController {

@IBOutlet weak var animationButton: UIButton!
@IBOutlet weak var myView: UIView!

override func viewDidLoad() {
    super.viewDidLoad()
    // I added seperate colour to UIView when animation move from one animation block to another.So, You can get better understanding how the sequence of animation works.
  self.myView.backgroundColor = .red
}

@IBAction func animateButton(_ sender: UIButton) {

    UIView.animate(withDuration: 0.5, delay: 0.0, options: UIViewAnimationOptions.curveEaseIn, animations: { 
        //Frame Option 1:
        self.myView.frame = CGRect(x: self.myView.frame.origin.x, y: 20, width: self.myView.frame.width, height: self.myView.frame.height)

        //Frame Option 2:
        //self.myView.center = CGPoint(x: self.view.frame.width / 2, y: self.view.frame.height / 4)
        self.myView.backgroundColor = .blue

        },completion: { finish in

    UIView.animate(withDuration: 1, delay: 0.25,options: UIViewAnimationOptions.curveEaseOut,animations: {
        self.myView.backgroundColor = .orange      
        self.myView.transform = CGAffineTransform(scaleX: 0.25, y: 0.25)

        self.animationButton.isEnabled = false // If you want to restrict the button not to repeat animation..You can enable by setting into true

        },completion: nil)})

      }
     } 

Salida: