Animate AutoLayout Constraints Separately

Animating AutoLayout constraints is easy:

// ...Change some constraints here, or inside the animation block
UIView.animate(withDuration: 1) {
  view.layoutIfNeeded()
}

The Problem

But that animates every constraint changes under a single, linear animation. What if you want to animate vertical constraint with spring, then animate width and height constraints in linear curve?

“Why would I want to do that?”

You might ask.

One reason is that it allows you to do the bouncing expansion similar to the iOS 11 App Store, using pure Auto Layout:

This is AutoLayout constraint animation!

This is exactly achieved by animating vertical constraint with spring, together with animating width and height linearly.

A Solution

Turns out, you can simply animate different constraint changes in each animation block simultaneously. Just don’t forget to end with layoutIfNeeded() on each of the block.

UIView.animate(withDuration: 1) {
  widthConstraint.constant = ...
  heightConstaint.constant = ...
  view.layoutIfNeeded() // flush all changes
}
UIView.animate(withDuration: 1, 
               delay: 0, 
               usingSpringWithDamping: 0.5, 
               initialSpringVelocity: 0, 
               options: [], 
               animations: 
{
  topConstraint.constant = ...
  view.layoutIfNeeded() // flush all changes
}) { (finished) in }