动画后如何将UIImage保持在新位置？

Question

I am moving UIImages across the screen, they are cards. When they move across the screen, the images are generic card backs. When they land in the correct positions, they are supposed to stay in that position however they revert back to the original points. The original points of playerCardOne , playerCardTwo , and playerCardThree are (60,28 , 90,28 , 120,28) respectively.

Here is the code:

[playerCardOne setImage:[UIImage imageNamed: @"cardBack.png"] forState:UIControlStateNormal];
[playerCardTwo setImage:[UIImage imageNamed: @"cardBack.png"] forState:UIControlStateNormal];
[playerCardThree setImage:[UIImage imageNamed: @"cardBack.png"] forState:UIControlStateNormal];

then animation:

[UIView animateWithDuration:1.0f
                 animations:^(void){
                     playerCardOne.center = CGPointMake(120.0f, 28.0f);
                     playerCardTwo.center = CGPointMake(90.0f, 28.0f);
                     playerCardThree.center = CGPointMake(60.0f, 28.0f);
                         } 
                 completion:^(BOOL finished) { 
                     if (finished) {                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      
                         [playerCardOne setImage:[UIImage imageNamed:playerCardOneTitle] forState:UIControlStateNormal];
                         [playerCardTwo setImage:[UIImage imageNamed:playerCardTwoTitle] forState:UIControlStateNormal];
                         [playerCardThree setImage:[UIImage imageNamed:playerCardThreeTitle] forState:UIControlStateNormal];
                     }
   }];

When the animation completes the front card images pop up and return to their original positions (ie playerCardOne should be at (120.0, 28.0) but reverts back to (60.0, 28.0) . How can I lock them in their new positions?

Answer 1

If you are using AutoLayout you should animate the constraints instead of the frames of items.

There is some information on this at objc.io under Animation.

Basically you modify a constraint and then relayout over a time period.

[UIView animateWithDuration:1.0f animations:^{
    [myView layoutIfNeeded];
}];

Answer 2

If you turn-off autolayout , then the button should stay at the new position. The reason is because autolayout will use the current constraints to calculate the position when you update the views.