UIView animate doesn't finish before Label is hidden

Question

My label is disappearing before the animation runs.

The animation should run after a button is pressed and slide out a label and the Button. But when I press the button they are both hidden before the animation can slide them out.

func nextGame() {

    UIView.animate(withDuration: 3, delay: 0.0, options: .allowAnimatedContent, animations: {
            NSLog("Animation started")
            self.labelWinningPlayer.center = CGPoint(x: self.labelWinningPlayer.center.x + 500, y: self.labelWinningPlayer.center.y)
            self.buttonNextGameLabel.center = CGPoint(x: self.buttonNextGameLabel.center.x + 500, y: self.buttonNextGameLabel.center.y)
        }, completion: { (finished: Bool) in
            NSLog("Animation stopped")
            self.labelWinningPlayer.isHidden = true
            self.buttonNextGameLabel.isHidden = true
    })


    //sets buttons to start position
    labelWinningPlayer.center = CGPoint(x: labelWinningPlayer.center.x - 1000, y: labelWinningPlayer.center.y)
    buttonNextGameLabel.center = CGPoint(x: buttonNextGameLabel.center.x - 1000, y: buttonNextGameLabel.center.y)

    //hides buttons that lay under the animated buttons 
    for i in 1...9 {

        if let button = view.viewWithTag(i) as? UIButton {
            button.setImage(nil, for: .normal)
        }
    }
    activeGame = true
}

//animation should get started with this button
@IBAction func buttenNextGameAction(_ sender: Any) {
    nextGame()
}

//slides buttons in
func slideNextGameButtons() {

    labelWinningPlayer.isHidden = false
    buttonNextGameLabel.isHidden = false

    UIView.animate(withDuration: 0.5, animations: {

        self.labelWinningPlayer.center = CGPoint(x: self.labelWinningPlayer.center.x + 500, y: self.labelWinningPlayer.center.y)
        self.buttonNextGameLabel.center = CGPoint(x: self.buttonNextGameLabel.center.x + 500, y: self.buttonNextGameLabel.center.y)
    })
}

Here is the NSLog. According to that it's running the full animation...

2017-11-15 23:26:17.321465 [2442:245232] Animation started
2017-11-15 23:26:20.325137 [2442:245232] Animation stopped

Thanks for your help in advance!

Answer 1

Your code works perfectly:

Therefore something that you have not told us about is causing whatever the problem is.

EDIT : And yes indeed, it was the code you didn't tell us about that causes the problem. You told us about this:

UIView.animate(withDuration: 3, delay: 0.0, options: .allowAnimatedContent, animations: {
        self.labelWinningPlayer.center = CGPoint(x: self.labelWinningPlayer.center.x + 500, y: self.labelWinningPlayer.center.y)
        self.buttonNextGameLabel.center = CGPoint(x: self.buttonNextGameLabel.center.x + 500, y: self.buttonNextGameLabel.center.y)
    }, completion: { (finished: Bool) in
        self.labelWinningPlayer.isHidden = true
        self.buttonNextGameLabel.isHidden = true
})

But you didn't tell us about the next lines, which are this:

labelWinningPlayer.center = CGPoint(x: labelWinningPlayer.center.x - 1000, y: labelWinningPlayer.center.y)
buttonNextGameLabel.center = CGPoint(x: buttonNextGameLabel.center.x - 1000, y: buttonNextGameLabel.center.y)

Those lines cancel the animation!

It seems you have not understood what an animation is. You animate first, and anything you want done after the animation, you put into the completion function. But those lines are something you want done after the animation. So put them into the completion function! Like this:

UIView.animate(withDuration: 3, delay: 0.0, options: .allowAnimatedContent, animations: {
        self.labelWinningPlayer.center = CGPoint(x: self.labelWinningPlayer.center.x + 500, y: self.labelWinningPlayer.center.y)
        self.buttonNextGameLabel.center = CGPoint(x: self.buttonNextGameLabel.center.x + 500, y: self.buttonNextGameLabel.center.y)
    }, completion: { (finished: Bool) in
        self.labelWinningPlayer.isHidden = true
        self.buttonNextGameLabel.isHidden = true
        labelWinningPlayer.center = CGPoint(x: labelWinningPlayer.center.x - 1000, y: labelWinningPlayer.center.y)
        buttonNextGameLabel.center = CGPoint(x: buttonNextGameLabel.center.x - 1000, y: buttonNextGameLabel.center.y)
        // ... and everything else in the method goes here too
})

And everything else in the method needs to be moved in there too. Everything that is to happen after the completion of the animation goes into the completion function. That is what completion means!

Answer 2

set the label and the button's super view clipsToBounds property to true

UIView.animate(withDuration: 3, delay: 0.0, options: [], animations: {
        NSLog("Animation started")
        self.labelWinningPlayer.center = CGPoint(x: (self.labelWinningPlayer.center.x) * 3, y: self.labelWinningPlayer.center.y)
        self.buttonNextGameLabel.center = CGPoint(x: (self.buttonNextGameLabel.center.x) * 3, y: self.buttonNextGameLabel.center.y)
    }, completion: { (finished: Bool) in
        NSLog("Animation stopped")
        self.labelWinningPlayer.isHidden = true
        self.buttonNextGameLabel.isHidden = true
    })