Animation pour redimensionner et déplacer UIView (Swift)

Question

J'ai un UIView, placé au milieu de l'écran. Lorsque l'utilisateur appuie sur un bouton, je souhaite que celui-ci se déplace vers le haut de l'écran lorsqu'il se réduit à environ un cinquième de sa taille.

J'ai essayé ceci:

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

Mais pour une raison quelconque, cela ne fait que redimensionner la vue. J'ai également essayé de mettre cela dans le animateWithDuration:

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

Comment puis-je faire fonctionner les deux animations?

Answer 1

La réponse de Joe ci-dessus correspond exactement à son GIF, mais elle ne répond pas vraiment à votre question car elle traduit alors met à l'échelle la vue (par opposition à la traduction et à la mise à l'échelle en même temps). Votre problème est que vous définissez la transformation de la vue dans votre bloc d'animation, puis que vous écrasez immédiatement cette valeur par une autre transformation. Pour obtenir à la fois la traduction et l’échelle en même temps, vous souhaiterez un résultat similaire à celui-ci:

@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

Vous pouvez atteindre les bases UIView animation de plusieurs manières dans Swift . Le code ci-dessous est juste une approche 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)})

      }
     } 

Sortie: