Animation with Constraints

Masonry constraints can be animated smoothly using UIView.animate combined with layoutIfNeeded().

Basic Animation

The key pattern is:

  1. Update constraints using mas_updateConstraints: or mas_remakeConstraints:
  2. Call layoutIfNeeded() inside an animation block

::: code-group

// Initial constraints
[box mas_makeConstraints:^(MASConstraintMaker *make) {
    make.center.equalTo(superview);
    make.size.mas_equalTo(CGSizeMake(100, 100));
}];

// Animate to new position
[box mas_updateConstraints:^(MASConstraintMaker *make) {
    make.center.equalTo(superview).offset(50);
}];

[UIView animateWithDuration:0.3 animations:^{
    [superview layoutIfNeeded];
}];

// Initial constraints
box.mas.makeConstraints { make in
    make.center.equalTo(superview)
    make.size.equalTo(CGSize(width: 100, height: 100))
}

// Animate to new position
box.mas.updateConstraints { make in
    make.center.equalTo(superview).offset(50)
}

UIView.animate(withDuration: 0.3) {
    superview.layoutIfNeeded()
}

:::

Animating Size Changes

::: code-group

// Expand the box
[box mas_updateConstraints:^(MASConstraintMaker *make) {
    make.size.mas_equalTo(CGSizeMake(200, 200));
}];

[UIView animateWithDuration:0.5
                      delay:0
     usingSpringWithDamping:0.7
      initialSpringVelocity:0.5
                    options:0
                 animations:^{
    [superview layoutIfNeeded];
} completion:nil];

// Expand the box
box.mas.updateConstraints { make in
    make.size.equalTo(CGSize(width: 200, height: 200))
}

UIView.animate(
    withDuration: 0.5,
    delay: 0,
    usingSpringWithDamping: 0.7,
    initialSpringVelocity: 0.5,
    options: []
) {
    superview.layoutIfNeeded()
}

:::

Layout Mode Switching with Remake

Use mas_remakeConstraints: when you need to completely change the layout:

::: code-group

// Switch from centered to top-left
[box mas_remakeConstraints:^(MASConstraintMaker *make) {
    make.top.left.equalTo(superview).offset(20);
    make.size.mas_equalTo(CGSizeMake(100, 100));
}];

[UIView animateWithDuration:0.4 animations:^{
    [superview layoutIfNeeded];
}];

// Switch from centered to top-left
box.mas.remakeConstraints { make in
    make.top.left.equalTo(superview).offset(20)
    make.size.equalTo(CGSize(width: 100, height: 100))
}

UIView.animate(withDuration: 0.4) {
    superview.layoutIfNeeded()
}

:::

Using Constraint References

Store a reference to animate a specific constraint:

::: code-group

@property (nonatomic, strong) MASConstraint *topConstraint;

// Create
[box mas_makeConstraints:^(MASConstraintMaker *make) {
    self.topConstraint = make.top.equalTo(superview).offset(20);
    make.centerX.equalTo(superview);
    make.size.mas_equalTo(CGSizeMake(100, 100));
}];

// Animate
self.topConstraint.offset(100);
[UIView animateWithDuration:0.3 animations:^{
    [superview layoutIfNeeded];
}];

var topConstraint: Constraint!

// Create
box.mas.makeConstraints { make in
    topConstraint = make.top.equalTo(superview).offset(20)
    make.centerX.equalTo(superview)
    make.size.equalTo(CGSize(width: 100, height: 100))
}

// Animate
topConstraint.offset(100)
UIView.animate(withDuration: 0.3) {
    superview.layoutIfNeeded()
}

:::

Tips

  • Use updateConstraints when you only need to change the constant of existing constraints — it's more performant.
  • Use remakeConstraints when the layout structure changes completely (e.g., switching between portrait and landscape layouts).