iOS Auto Layout How to animate with Auto Layout
Example
Without Auto Layout, animation is accomplished changing a view's frame over time. With Auto Layout, the constraints dictate the view frame, so you have to animate the constraints instead. This indirection makes animation harder to visualize.
Here are the ways to animate with Auto Layout:
- Change the constant of the constraint after creation using periodic calls (
CADisplayLink,dispatch_source_t,dispatch_after,NSTimer). Then calllayoutIfNeededto update the constraint. Example:
Objective-C:
self.someConstraint.constant = 10.0;
[UIView animateWithDuration:0.25 animations:^{
[self.view layoutIfNeeded];
}];
Swift:
self.someConstraint.constant = 10.0
UIView.animate(withDuration: 0.25, animations: self.view.layoutIfNeeded)
- Change the constraints and call
[view layoutIfNeeded]inside an animation block. This interpolates between the two positions ignoring constraints during the animation.
[UIView animateWithDuration:0.5 animations:^{
[view layoutIfNeeded];
}]
-
Change the priority of the constraints. This is less CPU intensive than adding and removing constraints.
-
Remove all constraints and use autosizing masks. For the later, you have to set
view.translatesAutoresizingMaskIntoConstraints = YES. -
Use constraints that don't interfere with the intended animation.
-
Use a container view. Position the superview using constraints. Then add a subview with constraints that don't fight the animation, eg: a center relative to the superview. This unloads part of the constraints to the superview, so they don't fight the animation in the subview.
-
Animate layers instead views. Layer transforms don't trigger the Auto Layout.
CABasicAnimation* ba = [CABasicAnimation animationWithKeyPath:@"transform"];
ba.autoreverses = YES;
ba.duration = 0.3;
ba.toValue = [NSValue valueWithCATransform3D:CATransform3DMakeScale(1.1, 1.1, 1)];
[v.layer addAnimation:ba forKey:nil];
-
Override layoutSubviews. Call
[super layoutSubviews]and fine tune the constraints. -
Change the frame in viewDidLayoutSubviews. Auto Layout is applied in
layoutSubviews, so once done, change it inviewDidLayoutSubviews. -
Opt out from Auto Layout and set views manually. You can do this overriding
layoutSubviews/layoutwithout calling the super class’s implementation.
Quick tip: if the parent of the animated view is not being interpolated (that is, the animation jumps from beginning to end state), call layoutIfNeeded() in the deepest view that is the parent of the view that is animated (in other words, that is not affected by the animation). I don't know exactly why this works.
