How to Animate Auto Layout Constraints

Make it look smooth and nice

Photo by Hal Gatewood on Unsplash

The task

I’m going to create an attractive green button, and let it move around the screen according to it’s constraints.

Setting properties for the constraints

I’m going to put 4 constraints around my UIButton — these are going to define the height, width, XConstraint and YConstraint so effectively we are setting the size, X and Y position of the UIButton.

var buttWidthConstraint: NSLayoutConstraint!
var buttHeightConstraint: NSLayoutConstraint!
var buttXConstraint: NSLayoutConstraint!
var buttYConstraint: NSLayoutConstraint!

Setting the initial constraints

Assuming we have correctly set up the UIButton (we have…look at the full code below) we will set up the constraints shown below:

let buttWidthConstraint = myButt.widthAnchor.constraint(equalToConstant: 100)
let buttHeightContraint = myButt.heightAnchor.constraint(equalToConstant: 100)
let buttXConstraint = myButt.centerXAnchor.constraint(equalTo: self.view.centerXAnchor)
let buttYConstaint = myButt.centerYAnchor.constraint(equalTo: self.view.centerYAnchor)
NSLayoutConstraint.activate([
buttXConstraint,
buttYConstraint,
buttWidthConstraint,
buttHeightConstraint
])
self.buttXConstraint = buttXConstraint
self.buttYConstraint = buttYConstaint
self.buttWidthConstraint = buttWidthConstraint
self.buttHeightConstraint = buttHeightConstraint

Changing and animating the constraints

There are two types of constraint here — one that we will set with a constant (the buttHeightConstraint), and one set as an equalTo: relationship with the view’s center.

Setting to a constant

Step 1: Deactivate the constraint

NSLayoutConstraint.deactivate([
self.buttHeightConstraint
])
if self.buttHeightConstraint.constant == 100 {
self.buttHeightConstraint.constant = 39
}
else {
self.buttHeightConstraint.constant = 100
}
NSLayoutConstraint.activate([
self.buttHeightConstraint
])
UIView.animate(withDuration: 0.5) {
self.view.layoutIfNeeded()
}

Setting to a relationship

Step 1: Deactivate the constraint

NSLayoutConstraint.deactivate([
self.buttXConstraint
])
var newButtXConstraint: NSLayoutConstraint
if self.buttXConstraint.constant == 100 {
newButtXConstraint = myButt.centerXAnchor.constraint(equalTo: self.view.centerXAnchor)
}
else {
newButtXConstraint = myButt.centerXAnchor.constraint(equalTo: self.view.centerXAnchor, constant: 100)
}
NSLayoutConstraint.activate([
self.buttHeightConstraint
])
UIView.animate(withDuration: 0.5) {
self.buttXConstraint = newButtXConstraint,
self.view.layoutIfNeeded()
}

The full playground

Here is the full Playground! Copy and paste if you would like to.

Conclusion

You’ll need to deactivate constraints before animating them, but overall it should not be too difficult to create a nice little animation providing you have a good grasp of UIKit.

Questions

You can get in touch with me HERE; I’m usually available on Twitter so can get back to you…fast

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store