作为容器视图一部分的按钮图像出现在该视图应该动画之前

Question

I've implemented a custom dialog box in a game (showing options when the game is paused) by using a Container View in the main game's ViewController. That Container View has a constraint to be centered vertically and I'm using that constraint to animate this custom dialog box.

The dialog box itself is an image of a wooden board on a pole with 4 buttons, each being an image I prepared. These buttons are arranged in a vertical Stack View which contains 2 horizontal Stack Views, each with 2 buttons, so they will be laid out nicely symmetrical.

All of the above is done in Interface Builder. So a segue was automatically added from the game's main ViewController to the new Pause Dialog View Controller.

In my game's main ViewController I move the Container View out of view by adding the following to my viewDidLoad(): dialogBoxYConstraint.constant -= (view.bounds.height)

Then when the user clicks on a PAUSE button which should show this dialog, the following code is running:

         
        UIView.animate(withDuration: 0.5, delay: 0, usingSpringWithDamping: 0.5, initialSpringVelocity: 0.5, options: .curveEaseInOut) {

            self.dialogBoxYConstraint.constant += (self.view.bounds.height)
            self.view.layoutIfNeeded()
        }
    }

So this code will bring the constraint's constant back to its original location and it will show the dialog box that I put inside the Container View.

When the user clicks on the PAUSE button all of this indeed happens and there's a nice animation with the wooden board and all 4 buttons fall into place and all buttons are clickable. Here's an image (disregard the small white buttons, these are temporary work-in-progress):

But , before that, before I click on the PAUSE button, I always see part of the buttons all the way on top. I see the lower 2 buttons completely and a bit of those above as in the following image:

As you can see, the wooden board isn't here, only the buttons, and when I do press the PAUSE button everything together correctly animates to the right place as in the 1st image.

(It's an AR app so you basically see my walls in the background, but that's irrelevant for this question).

Moreover, when the buttons are on top, they are not clickable.
Also, it doesn't matter if I change the constraint's constant to be even higher, say I do this:
dialogBoxYConstraint.constant -= (view.bounds.height + 500)
the buttons will always show at the same place.
And if I try to put this line in viewDidAppear then I can see the whole board with the buttons as in the first image for a second on a black background and then I get what you see in the 2nd image, which makes sense.

The above happens whether or not I've implemented the prepare(for segue: ) The segue itself is actually happening immediately as the main view is loaded, which is why I had to initially move it out of view.

As a test, I tried to set one button's isHidden to true in the Pause Dialog View Controller and then set it to false in the prepare(for segue: ) , thinking that maybe that would do something, but the button remained hidden all the time.
(Side question: how should I perform such changes in this child View Controller only after the user presses the PAUSE button? Since the segue happens already from the start, I don't understand how to control such changes only later on by user action?)

I'm not sure what I'm doing wrong. Looks like a glitch, but, as always, I guess it's something I did. I had assumed that moving the view's constraint should always move all of its contents together.
Anyone has any idea why the buttons are always there at the top?

I saw that there is a present(_:animated:completion:) method to present VC's. Should I be looking into this instead of animating the constraint as I did???

Answer 1

Posting this as an answer, as per the OP's comments...

It can be very difficult to debug layouts when UI element are "clear." Giving them background colors allows you to easily see the framing at run-time.

Also, Debug View Hierarchy can be very helpful, because you can inspect constraints (and even see hidden or out-of-bounds elements). Note that you may need to temporarily disable certain features - such as playing video or an active AR scene.