Question

In my iPad app I have a view controller with a small table view. When you tap on the table view it opens a modal view controller that is a larger and more refined version of the small table view. I would like to create an animation from a pre-rendered image of the large view controller by scaling the image down to be the size of the small table view and zoom it to full screen size and then replace the image with the “real” view controller.

Something like:

LargeViewController* lvc = [[LargeViewController alloc] init];
[self presentModalViewController:lvc byZoomingFromRect:CGRectMake(50,50,200,300)];

I know you can produce an image from a view:

- (UIImage *) imageWithView:(UIView *)view
{
    UIGraphicsBeginImageContextWithOptions(view.bounds.size, view.opaque, [[UIScreen mainScreen] scale]); 
    [view.layer renderInContext:UIGraphicsGetCurrentContext()];
    UIImage * img = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();
    return img;
}

But how do I make the view controller draw itself (offscreen) so I can take it’s view and scale the image in an animation to fill screen?

Thanks in advance.

Answer 1

I suppose you want to create your very own animation. Last month I played around with something like that. My solution was adding a custom view (maybe taken from a view controller) to the current view as an overlay. This works with layers, too.

First you fetch the Image from your “future” or “present” view controller, like you did in your code example above. Normally the view controllers content should be available while rendering to the context.

Now you have the image. The manipulation of the image must be done by you.

Add the image to a UIImageView. This ImageView can be added as subview or layer. Now you have a layer where you can freely draw above your actual user interface. Sometimes you have to move the layer or view around, so that it perfectly overlays your view. This depends on your view setup. If you are dealing with Tableviews, adding a subview is not that easy. So better use the layer.

After all the work was done, present the new view controller without animation, so that it appears immediately.

Remove the layer or view from your parent view after the work was done, and clean up.

This sounds complicated, but once you’ve done that you have a template for that. In “WWDC 2011, Session 309 Introducing Interface Builder Storyboarding” apple introduced ‘custom segues’, where you’ll find a mechanism for exactly what you want to do. The code below is a cut out of an older project and is somehow messy and must be cleaned up. But for showing the principle this should work:

-(void) animate {

      static LargeViewController* lvc = [[LargeViewController alloc] init];

      UIGraphicsBeginImageContextWithOptions(self.bounds.size, view.opaque, [[UIScreen mainScreen] scale]); 
     [lvc.view.layer renderInContext:UIGraphicsGetCurrentContext()];

      // Create a ImageView to display your "zoomed" image
      static UIImageView* displayView = [[UIImageView alloc] initWithFrame:self.view.frame];
      static UIImage * img = UIGraphicsGetImageFromCurrentImageContext();
      UIGraphicsEndImageContext();

      // Add your image to the view
      displayView.image = img;

      // insert the view above your actual view, adjust coordinates in the
      // frame property of displayView if overlay is misaligned
      [[self.view] addSubview:displayView];

      // alternatively you can use the layer
      // [self.view.layer addSublayer:displayView.layer];

      // draw the imageView
      [displayView setNeedsDisplay];

      // do something in background. You may create your own
      // construction, i.e. using a timer
      dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0), ^{

          NSDate *now = [NSDate date];
          NSTimeInterval animationDuration = 3.;
          NSTimeInterval t = -[now timeIntervalSinceNow];
          while (t < animationDuration) {

              t = -[now timeIntervalSinceNow];

              // Do some animation here, by manipulation the image
              // or the displayView

              // <calculate animation>, do something with img
              // you have exact timing information in t,
              // so you can set the scalefactor derived from t
              // You must not use an UIImage view. You can create your own view
              // and do sth. in draw rect. Do whatever you want,
              // the results will appear
              // in the view if you added a subview
              // or in a layer if you are using the layer

              dispatch_sync(dispatch_get_main_queue(), ^{

                  // display the result
                  displayView.image = img;
                  [displayView setNeedsDisplay];
              });
          }
       });

      // now the animation is done, present the real view controller
      [self presentModalViewController:lvc animated:NO];

      // and clean up here
}