Group Group Group Group Group Group Group Group Group Forums

Video Tutorial: Beginning iOS Animation Part 1: Beginning Constraint Animations

Learn the basics of animating constraints to create animations in an Auto Layout based project.

This is a companion discussion topic for the original entry at

Yeah, great introduction :slight_smile: As Mohamed asked few days ago on the older forum, I’m also wondering why executing the line menuHeightConstraint.constant = isMenuOpen ? 200.0 : 60.0 that sets the height constant to a new value BEFORE the animation block didn’t change the UI until layoutIfNeeded was called?
On the other hand using Cmd + T in simulator I was able to slow down the animations and noticed that the CGAffineTransformMakeRotation executed instantaneously if I’ve put it before the animation block. Why does it work that way?

Well just changing the constraint does not automatically trigger Auto Layout to rebuild the layout. You got to call layoutIfNeeded() for that. Now as a courtesy to you if you do NOT call layoutIfNeeded by the end of the current method Auto Layout will actually check the constraints when it has the chance to and automatically update the layout for you. So - to make this change animated you force layoutIfNeeded from an animation block and that’s why the layout update is animated. I have a full-length talk about this here if you are interested to see more details:

1 Like

I’m having an issue when attempting to connect the NSLayoutConstraint, when I try to connect it, it tries to connect to the view. I’ve been going through lessons and many of them seem to be stuck because the code in Swift 3 has been updated.

1 Like

we will be releasing an update for swift 3 in the next few months, meanwhile do try again since connecting contraints hasn’t changed since swift 2.

Wow that easy! So to understand fully we set the height of the layout constant dependant on wether the menu is open or not before the animation block. We declare an animation block and within that block by calling self.view.layoutIfNeeded() this function recognises any modifications to the layout constant and performs the animation on that layout constraint or I should say forces a pass for laying out the views? I know someone asked a similar question but wanted to drum it home clearly. Looking at the declaration of that function it says “-layoutIfNeeded forces layout early” so I am guessing my understanding is correct. Awesome by the way!

UPDATE: I watched your youtube video which is awesome and clarified my understanding to be correct :slight_smile: