New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Animate a UIView to another location #37

Closed
CognitiveWin opened this Issue Dec 27, 2013 · 4 comments

Comments

Projects
None yet
4 participants
@CognitiveWin

CognitiveWin commented Dec 27, 2013

If I have a view with constraints:

[self.summaryView makeConstraints:^(MASConstraintMaker *make) {

    self.animatableConstraint = make.edges.equalTo(self.view).with.insets(UIEdgeInsetsMake(80, 10, 10, 10));
}];

And later I want to animate to another point like:

// TODO: Set new position here.

[UIView animateWithDuration:2.5
                 animations:^{
                     [self.summaryView layoutIfNeeded];
                 }
                 completion:^(BOOL finished) {
                 }];

How can I do this?

@cloudkite

This comment has been minimized.

Show comment
Hide comment
@cloudkite

cloudkite Dec 27, 2013

Member

@trustyfrog there are two approaches to animating constraints with Masonry. Theres a couple of examples of both approaches in the example project

1. Using reference to the constraint

[self.summaryView makeConstraints:^(MASConstraintMaker *make) { 
    self.animatableConstraint = make.edges.equalTo(self.view).with.insets(UIEdgeInsetsMake(80, 10, 10, 10));
}];
// update constants values
self.animatableConstraint.insets(UIEdgeInsetsMake(90, 20, 20, 20));

// ensure layout happens in animation block
[self.summaryView setNeedsLayout];

[UIView animateWithDuration:2.5 animations:^{
    [self.summaryView layoutIfNeeded];
}];

2. An alternative approach is to use updateConstraints

//add property to store insets
@property (nonatomic, assign) UIEdgeInsets summaryInsets;

//create all constraints in update constraints
- (void)updateConstraints {
    [super updateConstraints];
    [self.summaryView updateConstraints:^(MASConstraintMaker *make) { 
        make.edges.equalTo(self.view).with.insets(self.summaryInsets);
    }];
}
// update constants values
self.summaryInsets = UIEdgeInsetsMake(90, 20, 20, 20);

// tell constraints they need updating
[self setNeedsUpdateConstraints];

// update constraints now so we can animate the change
[self updateConstraintsIfNeeded];

[UIView animateWithDuration:2.5 animations:^{
    [self layoutIfNeeded];
}];

Let me know if that helps. If you are changing the layout more drastically ie aligning self.summaryView to different views you will need to uninstall old constraints and install new ones to keep Auto Layout happy. However by the sounds of it you just want to update the insets so the above examples should work for you.

Member

cloudkite commented Dec 27, 2013

@trustyfrog there are two approaches to animating constraints with Masonry. Theres a couple of examples of both approaches in the example project

1. Using reference to the constraint

[self.summaryView makeConstraints:^(MASConstraintMaker *make) { 
    self.animatableConstraint = make.edges.equalTo(self.view).with.insets(UIEdgeInsetsMake(80, 10, 10, 10));
}];
// update constants values
self.animatableConstraint.insets(UIEdgeInsetsMake(90, 20, 20, 20));

// ensure layout happens in animation block
[self.summaryView setNeedsLayout];

[UIView animateWithDuration:2.5 animations:^{
    [self.summaryView layoutIfNeeded];
}];

2. An alternative approach is to use updateConstraints

//add property to store insets
@property (nonatomic, assign) UIEdgeInsets summaryInsets;

//create all constraints in update constraints
- (void)updateConstraints {
    [super updateConstraints];
    [self.summaryView updateConstraints:^(MASConstraintMaker *make) { 
        make.edges.equalTo(self.view).with.insets(self.summaryInsets);
    }];
}
// update constants values
self.summaryInsets = UIEdgeInsetsMake(90, 20, 20, 20);

// tell constraints they need updating
[self setNeedsUpdateConstraints];

// update constraints now so we can animate the change
[self updateConstraintsIfNeeded];

[UIView animateWithDuration:2.5 animations:^{
    [self layoutIfNeeded];
}];

Let me know if that helps. If you are changing the layout more drastically ie aligning self.summaryView to different views you will need to uninstall old constraints and install new ones to keep Auto Layout happy. However by the sounds of it you just want to update the insets so the above examples should work for you.

@cloudkite cloudkite closed this Dec 29, 2013

@CognitiveWin

This comment has been minimized.

Show comment
Hide comment
@CognitiveWin

CognitiveWin Jan 1, 2014

Thanks for that Jonas.

In the end I added an additional view to "host" the location of the window and added a reference to the constraint. This let me animate using the centre constraint which feels a neater solution albeit with the overhead of an additional view.

CognitiveWin commented Jan 1, 2014

Thanks for that Jonas.

In the end I added an additional view to "host" the location of the window and added a reference to the constraint. This let me animate using the centre constraint which feels a neater solution albeit with the overhead of an additional view.

@aalenliang

This comment has been minimized.

Show comment
Hide comment
@aalenliang

aalenliang Aug 26, 2016

Wonder what about Cocoa?

aalenliang commented Aug 26, 2016

Wonder what about Cocoa?

@nitishmakhija

This comment has been minimized.

Show comment
Hide comment
@nitishmakhija

nitishmakhija Mar 14, 2017

@cloudkite [super updateConstraints]; should be called at the end of the - (void)updateConstraints; as per apple's documentation

nitishmakhija commented Mar 14, 2017

@cloudkite [super updateConstraints]; should be called at the end of the - (void)updateConstraints; as per apple's documentation

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment