How do I make an expand/contract transition between views on iOS?

I'm trying to make a transition animation in iOS where a view or view controller appears to expand to fill the whole screen, then contract back to its former position when done. I'm not sure what this type of transition is officially called, but you can see an example in the YouTube app for iPad. When you tap one of the search result thumbnails on the grid, it expands from the thumbnail, then contracts back into the thumbnail when you return to the search.

I'm interested in two aspects of this:

1. How would you make this effect when transitioning between one view and another? In other words, if view A takes up some area of the screen, how would you transition it to view B which takes up the whole screen, and vice versa?

2. How would you transition to a modal view this way? In other words, if UIViewController C is currently showing and contains view D which takes up part of the screen, how do you make it look like view D is turning into UIViewController E which is presented modally on top of C?

Edit: I'm adding a bounty to see if that gets this question more love.

Edit: I've got some source code that does this, and Anomie's idea works like a charm, with a few refinements. I had first tried animating the modal controller's view (E), but it didn't produce the effect of feeling like you're zooming into the screen, because it wasn't expanding all the stuff around the thumbnail view in (C). So then I tried animating the original controller's view (C), but the redrawing of it made for a jerky animation, and things like background textures did not zoom properly. So what I wound up doing is taking an image of the the original view controller (C) and zooming that inside the modal view (E). This method is substantially more complex than my original one, but it does look nice! I think it's how iOS must do its internal transitions as well. Anyway, here's the code, which I've written as a category on UIViewController.

UIViewController+Transitions.h:

#import <Foundation/Foundation.h>

@interface UIViewController (Transitions)

// make a transition that looks like a modal view 
//  is expanding from a subview
- (void)expandView:(UIView *)sourceView 
        toModalViewController:(UIViewController *)modalViewController;

// make a transition that looks like the current modal view 
//  is shrinking into a subview
- (void)dismissModalViewControllerToView:(UIView *)view;

@end

UIViewController+Transitions.m:

#import "UIViewController+Transitions.h"

@implementation UIViewController (Transitions)

// capture a screen-sized image of the receiver
- (UIImageView *)imageViewFromScreen {
  // make a bitmap copy of the screen
  UIGraphicsBeginImageContextWithOptions(
    [UIScreen mainScreen].bounds.size, YES, 
    [UIScreen mainScreen].scale);
  // get the root layer
  CALayer *layer = self.view.layer;
  while(layer.superlayer) {
    layer = layer.superlayer;
  }
  // render it into the bitmap
  [layer renderInContext:UIGraphicsGetCurrentContext()];
  // get the image
  UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
  // close the context
  UIGraphicsEndImageContext();
  // make a view for the image
  UIImageView *imageView = 
    [[[UIImageView alloc] initWithImage:image]
      autorelease];

  return(imageView);
}

// make a transform that causes the given subview to fill the screen
//  (when applied to an image of the screen)
- (CATransform3D)transformToFillScreenWithSubview:(UIView *)sourceView {
  // get the root view
  UIView *rootView = sourceView;
  while (rootView.superview) rootView = rootView.superview;
  // convert the source view's center and size into the coordinate
  //  system of the root view
  CGRect sourceRect = [sourceView convertRect:sourceView.bounds toView:rootView];
  CGPoint sourceCenter = CGPointMake(
    CGRectGetMidX(sourceRect), CGRectGetMidY(sourceRect));
  CGSize sourceSize = sourceRect.size;
  // get the size and position we're expanding it to
  CGRect screenBounds = [UIScreen mainScreen].bounds;
  CGPoint targetCenter = CGPointMake(
    CGRectGetMidX(screenBounds),
    CGRectGetMidY(screenBounds));
  CGSize targetSize = screenBounds.size;
  // scale so that the view fills the screen
  CATransform3D t = CATransform3DIdentity;
  CGFloat sourceAspect = sourceSize.width / sourceSize.height;
  CGFloat targetAspect = targetSize.width / targetSize.height;
  CGFloat scale = 1.0;
  if (sourceAspect > targetAspect)
    scale = targetSize.width / sourceSize.width;
  else
    scale = targetSize.height / sourceSize.height;
  t = CATransform3DScale(t, scale, scale, 1.0);
  // compensate for the status bar in the screen image
  CGFloat statusBarAdjustment =
    (([UIApplication sharedApplication].statusBarFrame.size.height / 2.0) 
      / scale);
  // transform to center the view
  t = CATransform3DTranslate(t, 
    (targetCenter.x - sourceCenter.x), 
    (targetCenter.y - sourceCenter.y) + statusBarAdjustment, 
    0.0);

  return(t);
}

- (void)expandView:(UIView *)sourceView 
        toModalViewController:(UIViewController *)modalViewController {

  // get an image of the screen
  UIImageView *imageView = [self imageViewFromScreen];

  // insert it into the modal view's hierarchy
  [self presentModalViewController:modalViewController animated:NO];
  UIView *rootView = modalViewController.view;
  while (rootView.superview) rootView = rootView.superview;
  [rootView addSubview:imageView];

  // make a transform that makes the source view fill the screen
  CATransform3D t = [self transformToFillScreenWithSubview:sourceView];

  // animate the transform
  [UIView animateWithDuration:0.4
    animations:^(void) {
      imageView.layer.transform = t;
    } completion:^(BOOL finished) {
      [imageView removeFromSuperview];
    }];
}

- (void)dismissModalViewControllerToView:(UIView *)view {

  // take a snapshot of the current screen
  UIImageView *imageView = [self imageViewFromScreen];

  // insert it into the root view
  UIView *rootView = self.view;
  while (rootView.superview) rootView = rootView.superview;
  [rootView addSubview:imageView];

  // make the subview initially fill the screen
  imageView.layer.transform = [self transformToFillScreenWithSubview:view];
  // remove the modal view
  [self dismissModalViewControllerAnimated:NO];

  // animate the screen shrinking back to normal
  [UIView animateWithDuration:0.4 
    animations:^(void) {
      imageView.layer.transform = CATransform3DIdentity;
    }
    completion:^(BOOL finished) {
      [imageView removeFromSuperview];
    }];
}

@end

You might use it something like this in a UIViewController subclass:

#import "UIViewController+Transitions.h"

...

- (void)userDidTapThumbnail {

  DetailViewController *detail = 
    [[DetailViewController alloc]
      initWithNibName:nil bundle:nil];

  [self expandView:thumbnailView toModalViewController:detail];

  [detail release];
}

- (void)dismissModalViewControllerAnimated:(BOOL)animated {
  if (([self.modalViewController isKindOfClass:[DetailViewController class]]) &&
      (animated)) {

    [self dismissModalViewControllerToView:thumbnailView];

  }
  else {
    [super dismissModalViewControllerAnimated:animated];
  }
}

Edit: Well, it turns out that doesn't really handle interface orientations other than portrait. So I had to switch to animating the transition in a UIWindow using a view controller to pass along the rotation. See the much more complicated version below:

UIViewController+Transitions.m:

@interface ContainerViewController : UIViewController { }
@end

@implementation ContainerViewController
  - (BOOL)shouldAutorotateToInterfaceOrientation:
          (UIInterfaceOrientation)toInterfaceOrientation {
    return(YES);
  }
@end

...

// get the screen size, compensating for orientation
- (CGSize)screenSize {
  // get the size of the screen (swapping dimensions for other orientations)
  CGSize size = [UIScreen mainScreen].bounds.size;
  if (UIInterfaceOrientationIsLandscape(self.interfaceOrientation)) {
    CGFloat width = size.width;
    size.width = size.height;
    size.height = width;
  }
  return(size);
}

// capture a screen-sized image of the receiver
- (UIImageView *)imageViewFromScreen {

  // get the root layer
  CALayer *layer = self.view.layer;
  while(layer.superlayer) {
    layer = layer.superlayer;
  }
  // get the size of the bitmap
  CGSize size = [self screenSize];
  // make a bitmap to copy the screen into
  UIGraphicsBeginImageContextWithOptions(
    size, YES, 
    [UIScreen mainScreen].scale);
  CGContextRef context = UIGraphicsGetCurrentContext();
  // compe开发者_如何学编程nsate for orientation
  if (self.interfaceOrientation == UIInterfaceOrientationLandscapeLeft) {
    CGContextTranslateCTM(context, size.width, 0);
    CGContextRotateCTM(context, M_PI_2);
  }
  else if (self.interfaceOrientation == UIInterfaceOrientationLandscapeRight) {
    CGContextTranslateCTM(context, 0, size.height);
    CGContextRotateCTM(context, - M_PI_2);
  }
  else if (self.interfaceOrientation == UIInterfaceOrientationPortraitUpsideDown) {
    CGContextTranslateCTM(context, size.width, size.height);
    CGContextRotateCTM(context, M_PI);
  }
  // render the layer into the bitmap
  [layer renderInContext:context];
  // get the image
  UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
  // close the context
  UIGraphicsEndImageContext();
  // make a view for the image
  UIImageView *imageView = 
    [[[UIImageView alloc] initWithImage:image]
      autorelease];
  // done
  return(imageView);
}

// make a transform that causes the given subview to fill the screen
//  (when applied to an image of the screen)
- (CATransform3D)transformToFillScreenWithSubview:(UIView *)sourceView
                 includeStatusBar:(BOOL)includeStatusBar {
  // get the root view
  UIView *rootView = sourceView;
  while (rootView.superview) rootView = rootView.superview;
  // by default, zoom from the view's bounds
  CGRect sourceRect = sourceView.bounds;
  // convert the source view's center and size into the coordinate
  //  system of the root view
  sourceRect = [sourceView convertRect:sourceRect toView:rootView];
  CGPoint sourceCenter = CGPointMake(
    CGRectGetMidX(sourceRect), CGRectGetMidY(sourceRect));
  CGSize sourceSize = sourceRect.size;
  // get the size and position we're expanding it to
  CGSize targetSize = [self screenSize];
  CGPoint targetCenter = CGPointMake(
    targetSize.width / 2.0,
    targetSize.height / 2.0);

  // scale so that the view fills the screen
  CATransform3D t = CATransform3DIdentity;
  CGFloat sourceAspect = sourceSize.width / sourceSize.height;
  CGFloat targetAspect = targetSize.width / targetSize.height;
  CGFloat scale = 1.0;
  if (sourceAspect > targetAspect)
    scale = targetSize.width / sourceSize.width;
  else
    scale = targetSize.height / sourceSize.height;
  t = CATransform3DScale(t, scale, scale, 1.0);
  // compensate for the status bar in the screen image
  CGFloat statusBarAdjustment = includeStatusBar ?
    (([UIApplication sharedApplication].statusBarFrame.size.height / 2.0) 
      / scale) : 0.0;
  // transform to center the view
  t = CATransform3DTranslate(t, 
    (targetCenter.x - sourceCenter.x), 
    (targetCenter.y - sourceCenter.y) + statusBarAdjustment, 
    0.0);

  return(t);
}

- (void)expandView:(UIView *)sourceView 
        toModalViewController:(UIViewController *)modalViewController {

  // get an image of the screen
  UIImageView *imageView = [self imageViewFromScreen];
  // show the modal view
  [self presentModalViewController:modalViewController animated:NO];
  // make a window to display the transition on top of everything else
  UIWindow *window = 
    [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
  window.hidden = NO;
  window.backgroundColor = [UIColor blackColor];
  // make a view controller to display the image in
  ContainerViewController *vc = [[ContainerViewController alloc] init];
  vc.wantsFullScreenLayout = YES;
  // show the window
  [window setRootViewController:vc];
  [window makeKeyAndVisible];
  // add the image to the window
  [vc.view addSubview:imageView];

  // make a transform that makes the source view fill the screen
  CATransform3D t = [self 
    transformToFillScreenWithSubview:sourceView
    includeStatusBar:(! modalViewController.wantsFullScreenLayout)];

  // animate the transform
  [UIView animateWithDuration:0.4
    animations:^(void) {
      imageView.layer.transform = t;
    } completion:^(BOOL finished) {
      // we're going to crossfade, so change the background to clear
      window.backgroundColor = [UIColor clearColor];
      // do a little crossfade
      [UIView animateWithDuration:0.25 
        animations:^(void) {
          imageView.alpha = 0.0;
        }
        completion:^(BOOL finished) {
          window.hidden = YES;
          [window release];
          [vc release];
        }];
    }];
}

- (void)dismissModalViewControllerToView:(UIView *)view {

  // temporarily remove the modal dialog so we can get an accurate screenshot 
  //  with orientation applied
  UIViewController *modalViewController = [self.modalViewController retain];
  [self dismissModalViewControllerAnimated:NO];

  // capture the screen
  UIImageView *imageView = [self imageViewFromScreen];
  // put the modal view controller back
  [self presentModalViewController:modalViewController animated:NO];
  [modalViewController release];

  // make a window to display the transition on top of everything else
  UIWindow *window = 
    [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
  window.hidden = NO;
  window.backgroundColor = [UIColor clearColor];
  // make a view controller to display the image in
  ContainerViewController *vc = [[ContainerViewController alloc] init];
  vc.wantsFullScreenLayout = YES;
  // show the window
  [window setRootViewController:vc];
  [window makeKeyAndVisible];
  // add the image to the window
  [vc.view addSubview:imageView];

  // make the subview initially fill the screen
  imageView.layer.transform = [self 
    transformToFillScreenWithSubview:view
    includeStatusBar:(! self.modalViewController.wantsFullScreenLayout)];

  // animate a little crossfade
  imageView.alpha = 0.0;
  [UIView animateWithDuration:0.15 
    animations:^(void) {
      imageView.alpha = 1.0;
    }
    completion:^(BOOL finished) {
      // remove the modal view
      [self dismissModalViewControllerAnimated:NO];
      // set the background so the real screen won't show through
      window.backgroundColor = [UIColor blackColor];
      // animate the screen shrinking back to normal
      [UIView animateWithDuration:0.4 
        animations:^(void) {
          imageView.layer.transform = CATransform3DIdentity;
        }
        completion:^(BOOL finished) {
          // hide the transition stuff
          window.hidden = YES;
          [window release];
          [vc release];
        }];
    }];

}

Whew! But now it looks just about like Apple's version without using any restricted APIs. Also, it works even if the orientation changes while the modal view is in front.

1. Making the effect is simple. You take the full-sized view, initialize its transform and center to position it on top of the thumbnail, add it to the appropriate superview, and then in an animation block reset the transform and center to position it in the final position. To dismiss the view, just do the opposite: in an animation block set transform and center to position it on top of the thumbnail, and then remove it completely in the completion block.

   Note that trying to zoom from a point (i.e. a rectangle with 0 width and 0 height) will screw things up. If you're wanting to do that, zoom from a rectangle with width/height something like 0.00001 instead.

2. One way would be to do the same as in #1, and then call presentModalViewController:animated: with animated NO to present the actual view controller when the animation is complete (which, if done right, would result in no visible difference due to the presentModalViewController:animated: call). And dismissModalViewControllerAnimated: with NO followed by the same as in #1 to dismiss.

   Or you could manipulate the modal view controller's view directly as in #1, and accept that parentViewController, interfaceOrientation, and some other stuff just won't work right in the modal view controller since Apple doesn't support us creating our own container view controllers.

After watching the Youtube iPad animation, I figured out that it's just an illusion. Let's say that there's a SearchViewController for the search results, and a DetailViewController for the video itself, and the additional info of the video.

DetailViewController has a method like - (id)initWithFullscreen which starts the view controller using the full screen space with the video.

So the sequence goes like this:

1. SearchViewController presents its results.
2. User clicks on a video.
3. DetailViewController is created with initWithFullscreen, but not presented
4. The "Zoom in" animation begins. (Notice that we are still on the SearchViewController, and this animation is just a simple View animation)
5. The "Zoom in" animation ends, presents the DetailViewController with animated:NO (as Anomie mentioned).
6. The DetailViewController is now presented, and using full space.

It doesn't seem that the youtube app is doing anything fancier, the give-away was that the "Zoom in" animation zooms to a black square, before presenting the full video.