CODEWITHSUNDEEP
iosswiftanimationuiview
MarkoPaulo
MarkoPaulo

Reputation: 483

Not all content is animated inside a stack view when hiding it

I'm currently working on a iOS (swift 3) app. I have a simple vertical stack view containing 2 horizontal stack views. In some cases I want to hide the bottom one. I do so by using the following code

 UIView.animate(withDuration: 3) {
                self.bottomStackView.isHidden = true;
 };

The animation shown below doesn't really do what I would expect:

enter image description here

While the border of the buttons is animated properly when hiding, the text inside each button doesn't seem to be affected until the very end. Any idea as to how I could fix this?

Upvotes: 2

Views: 2650

Answers (2)

MarkoPaulo
MarkoPaulo

Reputation: 483

I kept doing some research on the subject, and it seems like most articles were suggesting that using stacks to perform animation would work fine. However I have also found that animations would only work with animatable properties, isHidden not being one of them.

In the end after some trial and errors I have found that isHidden can be animated with stack views, but you can expect children to misbehave. So far the only workaround I have found is like so:

        let duration = 0.5;
        let delay = 0;
        UIView.animate(withDuration: duration, delay: delay, animations: {
            self.bottomStack.isHidden = self.hideBottomStack;
        })
        UIView.animate(withDuration: duration/2, delay: delay, animations: {
            self.bottomStack.alpha = 0;
        })

You'll note here that I basically "turn" the alpha property down to 0 in half the time I take to hide the stack. This has the effect to hide the text before it overlaps with the upper stack. Also note that I could also have decided to do something like this:

       UIView.animate(withDuration: duration, delay: delay, animations: {
           self.bottomStack.alpha = 0;
       }, completion: { (_) in 
           self.bottomStack.isHidden = true;
       })

This would also hide the bottom stack, but you lose the hiding motion in favor of a fading motion and hide the stack once the fading is done.

Upvotes: 3

JoniVR
JoniVR

Reputation: 1879

I'm not sure about this, I think stackviews can cause weird behaviour sometimes. Have you tried adding "self.view.layoutIfNeeded()" inside the UIView.animate block? Like this:

UIView.animate(withDuration: 3) {
      self.bottomStackView.isHidden = true
      self.view.layoutIfNeeded()
}

I think it should also work if you put the "self.bottomStackView.isHidden = true" above the UIView.animate, not sure though, not an expert at it. Also, I don't think you need to use ";" after your line of code in swift :)

Upvotes: 2

Related Questions