uistackview中的排列子视图中的动画“跳跃”

Question

I have a horizontal UIStackView containing several arranged subviews.

I want to remove one arranged subview (let's call it A) when a user clicks on a button, but just before that I want to do a quick animation. I want to do my own animation so I can't only animate stackView.removeArrangedSubview which would do a default basic animation, and not the special one I want.

Within A, I have another view (let's call it B) that is centeredX and centeredY using Auto Layout.

When I animate the A.widthAnchor.constant of my arrangedSubview A to 0, so the others arrangedsubviews come in the place of it progressively, the children B loses just before animation its CenterX and goes to the left. Or maybe it doesn't lose centerX, but it is centeredX on a tiny A (that has width = 0, and starts on the left), but A shouldn't have its width to 0 immediately, but after the animation completes...

I try as much as I can to explain clearly but I know it may be confusing. Here is the video showing the problem. The image (B), which is in an arrangedsubview A (taking all screen) "jumps" on the left before the animation starts.

https://drive.google.com/open?id=1nTDRe5zirbuQi86WVBTuU-iDU8aq0lcw

Here is my very simple code to make this animation :

   UIView.animate(withDuration:4,delay:0, options:.curveEaseInOut, animations : {

        self.c.constant = 0 // c is A.widthAnchor constraint
        self.stackView.layoutIfNeeded()

    },completion: { _ in
        // done
    })

Answer 1

I found myself : Actually, the problem was that when I do

Stackview.layoutIfNeeded()

What is inside the stackview can animate but not the stackview itself. So the stackview updated its width before the animation started. I just changed to

superviewThatContainTheStackView.layoutIfNeeded()

So everything works now :)