Question

I am having a weird error while animating a couple of view in iOS. My goal is to switch from a custom “Split View”. You can see what’s going on in this youtube video: http://youtu.be/ZWbf2bQYMns

You can see the weird “bump” in the Y value of the UIImageView, and I have been wondering how to fix it for quite a while now.

This is the View Controller’s interface:

@interface VideoSharing_Pad : UIViewController
{   
    IBOutlet UIView *videoCallView;
    IBOutlet UIImageView *imageView;  //This is "inside" mediaView
    IBOutlet UIView *mediaView;
    CGRect mediaRect;
    CGRect videoCallRect;
    CGRect imageRect;
}

In viewDidLoad I store both views doing:

//Get frames from XIB
mediaRect = mediaView.frame;
videoCallRect = videoCallView.frame;
imageRect = imageView.frame;

And this is the code that executes when I want to switch from the Split View to a full Screen Mode:

- (IBAction)toggleFullScreen:(id)sender 
{
    if (iScreenMode == callAndShareMedia) {
        CGRect fullScreenRect = CGRectMake(0, 0, 1024, 768);
        CGRect dissapearRect = CGRectMake(0, - videoCallView.bounds.size.height, videoCallView.bounds.size.width, videoCallView.bounds.size.height);

        [UIView animateWithDuration:1.0
                              delay:0.1
                            options: UIViewAnimationCurveEaseOut
                         animations:^{

                             [videoCallView setFrame:dissapearRect];
                             [imageView setFrame:fullScreenRect];
                             [mediaView setFrame:fullScreenRect];
                         } 
                         completion:^(BOOL finished){

                         }];

        iScreenMode = onlyShareMedia;
        return;
    } 
    else if (iScreenMode == onlyShareMedia)
    {

        [UIView animateWithDuration:1.0
                              delay:0.1
                            options: UIViewAnimationCurveEaseOut
                         animations:^{

                             [videoCallView setFrame:videoCallRect];
                             [mediaView setFrame:mediaRect];
                             [imageView setFrame:imageRect];  

                         } 
                         completion:^(BOOL finished){    
                         }];
        iScreenMode = callAndShareMedia;
        return;
    }     
}

I would really appreciate any help I can get. Thanks a lot!

this is a screenshot of the XIB:

as you can see from the screenshot and the .h file, the imageView is inside an UIView called mediaView, The other UIView, videoCallView is the one with the three dummy pictures.

Answer 1

Interesting question indeed. It definitely has to do with animating superview and subview at the same time. I did sample program, and reproduced similar situation.

My workaround would be to avoid animating the superview (mediaView), and expand only the subview (imageView) to full rectangle. Since your superview (mediaView) does not have much, it should not give so different user experience.

So, instead of

[UIView animateWithDuration:1.0
                      delay:0.1
                    options: UIViewAnimationOptionCurveEaseOut
                 animations:^{
                     [videoCallView setFrame:dissapearRect];
                     [imageView setFrame:fullScreenRect];
                     [mediaView setFrame:fullScreenRect];
 }];

You can do

[UIView animateWithDuration:1.0
                      delay:0.1
                    options: UIViewAnimationOptionCurveEaseOut
                 animations:^{
                     [videoCallView setFrame:dissapearRect];
                     [imageView setFrame:(CGRect){fullScreenRect.origin.x - mediaRect.origin.x, fullScreenRect.origin.y - mediaRect.origin.y, fullScreenRect.size}];
 }];

For coming back to normal mode, you can just ignore mediaView animation. Probably you want to move (animate) the toggleButton along with other animation as well.

@jrturton’s answer (second part) seemed a nice workaround, but it did not work on my sample code. It worked on the way to go (expansion), but bumped on the way back (shrink), for the reason I don’t know why. But don’t dismiss his answer because of my comment, it could be me.