UIView animation undoes a previous animation

Question

I have three UIImageViews (A, B, C) laid out in a UIView, side by side. Behind the first UIImageView (A), there is a simple UIView (which let us call X) with a green background. When a user taps one of the A, B, C image views, I move (and animate) the background view X, and make its center equal to the center of the view tapped. For example, if X was behind A initially, and B was tapped, then the following code would execute:

[UIView animateWithDuration:0.5 
                 animations:^{ X.center = B.center } 
                 completion:nil]; 

which would move X behind B.

Now, my window also contains another view (let us call it V), that when tapped, it animates by calling

[UIView animateWithFramesWithDuration ... ]

However, when this animation finishes, the first animation is undone (X moves behind A always). Why does this happen ? What can I do to fix this problem ?

Answer 1

As you say in your answer, this is reproducible only in views created in a storyboard. Is auto layout enabled in the storyboard? If so, you should not be animating center, and I would expect the behavior you are seeing if you were. When you create the views programmatically, if you are not setting translatesAutoresizingMaskIntoConstraints to NO, then your animations should work as expected when you animate center.

The correct way to animate views that are managed by auto layout constraints is to update the constraints to represent the new layout and then, in a [UIView animateWith…] block, call -layoutIfNeeded on the appropriate view.

Answer 2

It seems that the problem exists only for UIViews that are created in a Storyboard. For UIViews that are created programmatically, the problem does not manifest.