Trying to animate two UIViews at a time, only one moves

Question

I am trying to create an animation in my iOS application where the new image will slide on the screen on the left, while the main image will slide to the right to make room for it. The main view is a subclass of my top view controller view, and the side view that is moving is loaded from a separate xib file.

In case that matters, here is my code to load the side view, called from my viewDidLoad method of the main view controller:

sideViewController = [[SideViewController alloc] init]; [sideViewController loadView]; sideView = sideViewController.topView; [self.view addSubview:sideView]; sideView.hidden = YES; sideView.frame = CGRectMake(-200, 0, 200, 460); 

And here is the code that is called for the animation of two kinds:

 sideView.hidden = NO; [UIView animateWithDuration:0.25f animations:^{ mainView.frame = CGRectMake(200, 0, 320, 460); sideView.frame = CGRectMake(0, 0, 200, 460); }]; 

It seems simple enough. But for some reason, only sideView animates - mainView is not moving anywhere. And to make things even more confusing, if I comment out a line in the animation block that moves the sideView, the animation for mainView starts working.

Does anyone know what happened? Of all the searches and documents that I read, I should work fine. What I thought would be simple animation turned into hours of disappointment. Any help would be greatly appreciated!

Edit:

Turning Off Guo Luchuan Offers I tried to animate the various properties of the two UIViews. Most got the same result, although the animation of both of their transform properties almost worked. In this case, both UIViews are animated, but mainView just did wrong: its animation started from it in a different position and ended in the wrong place. It seems that he is doing the translation that I entrusted him with, but starting from this position, expressed in vector calculations:

 starting_point - 0.5 * total_translation 

means that it ends with:

 starting_point + 0.5 * total_translation 

The side view, however, is animated correctly.

This is damn annoying. I did not understand that the animation on iOS in this way was so broken. The next thing I'm going to try is to use CABasicAnimation, although I'm not happy that I have to resort to using such a low-level API for something so simple.

Answer 1

The problem was that I turned on autoload for my xib files. As soon as I turned it off, my original animation code worked flawlessly.

Answer 2

I met the same problem as you.

When I set 2 views of the same property (for example, frame or transform ) at the same time, in the UIView animation block it will not work for the expected.

So, I set the frame views and set other transform views, then it works well, but I don't know why this will be so.

I think this will work for you.

 sideView.hidden = NO; [UIView animateWithDuration:0.25f animations:^{ mainView.frame = CGRectMake(200, 0, 320, 460); sideView.transform = CGAffineTransformMakeTranslation(200,0); }]; 

And I think you can do 2 CABasicAnimation and then add them to CAAnimationGroup . It may also work for you.

Answer 3

If sideView is a subview of mainView , use this animation method:

 +animateWithDuration:delay:options:animations:completion: 

with option:

 UIViewAnimationOptionAllowAnimatedContent 

Answer 4

I finally found a solution, and I think this is pretty disgusting. Here is the code that works:

 mainView.transform = CGAffineTransformMakeTranslation(400,0); CABasicAnimation *move = [CABasicAnimation animationWithKeyPath:@"transform.translation.x" ]; [move setFromValue:[NSNumber numberWithFloat:200]]; [move setToValue:[NSNumber numberWithFloat:400]]; [move setDuration:0.25]; move.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut]; [[mainView layer] addAnimation:move forKey:@"transform.translation.x"]; sideView.center = CGPointMake(100, 230); CABasicAnimation *sideMove = [CABasicAnimation animationWithKeyPath:@"transform.translation.x" ]; [sideMove setFromValue:[NSNumber numberWithFloat:-200]]; [sideMove setToValue:[NSNumber numberWithFloat:0]]; [sideMove setDuration:0.25]; sideMove.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut]; [[sideView layer] addAnimation:sideMove forKey:@"transform.translation.x"]; 

Firstly, if I did not install the mainView transformation, all this will not work, and the mainView will not move anywhere after the animation. I tried to set its frame and center, but none of them had any effect. Only the conversion worked. This detail is similar to using the animateWithDuration method.

Secondly, and this is the part that bothers me the most, why the numbers, what are they? For some reason, I needed to compensate the mainView for 200 extra pixels to the right (sideView width) to make it line up correctly. If I didn’t do this, he would liven up exactly where he was before, although I changed his affine transformation from identity to translating 200 pixels to the right.

As far as I can tell, sideView affects mainView in some strange way, even if they are siblings directly under my top-level view of the view controller and should not have any hierarchical relationships. I suppose this has to do with loading sideView from xib, but as far as I can tell, I am doing it right.

We hope that this solution will be useful for someone else who is in a similar situation, and they will not have to do the same annoying dead chicken programming that I just did.

Also, if anyone can offer an explanation for all this, I would be very grateful! I don’t like coding things that I don’t understand, and I would like to know why all this happened, so I can avoid such situations in the future.