Incorrect animation with layout constraints and NSAnimationContext

Question

I want to expand a view in response to a click on a disclosure triangle, but the animation isn't running the way I want.

(Sorry if the gif isn't looping. The tool was supposed to create a looping animation but apparently didn't...)

When it expands, the outer view instantly changes size and then the contents animate upwards back into place. When it collapses, again the size change instant and then the contents scroll within it. What I want is for the size change to be animated, revealing/hiding the contents without them moving relative to the top left of the enclosing view.

My code looks like this:

  NSAnimationContext.runAnimationGroup({
    context in
    context.duration = 0.25
    context.allowsImplicitAnimation = true
    // Order is important so we don't get conflicting constraints
    if newValue {
      closedConstraint.isActive = false
      openConstraint.isActive = true
    }
    else {
      openConstraint.isActive = false
      closedConstraint.isActive = true
    }
    layoutSubtreeIfNeeded()
  }, completionHandler: {
    self.disclosureButton.integerValue = newValue ? 1 : 0
  })

openConstraint constraints the bottom of the enclosing view to the bottom of the last field. closedConstraint constrains it to the bottom of the text label at the top, so only the label is visible.

So how do I a) animate the bounds of the enclosing view and b) keep the contents anchored to the top during the animation?

Answer 1

I think your problem comes from the fact that, when animating on layout constraints, the animation will only be applied to the re-layout of the current view.

This means that, while the content of the view re-layoutes with animation, the frame does not have the animation and thus re-draws instantly.

What you can do to work around this issue is trying to animate the superview instead. I am not sure how this would work inside this code but maybe try adding superview?.setNeedsLayout() and superview?.layoutIfNeeded() inside your animation block.

I apologize if this is not an perfect solution as I faced a similar issue in the past and haven't found a good fix either.

Let me know if that helps.