title: Custom transition between two UIViews
body: <p>I have two views "A" and "B". A floats in the middle of the window (it's not full screen). B, the view which will replace A, is full screen. I'd like to write a custom transition that flips A to reveal B on the back side, but simultaneously scales the flipping rectangle so that when the flip is finished, B is full screen. </p>
  
  <p>I've tried using the flip transitions available with transitionFromView:toView:duration:options:completion, but I can only get it to flip the entire screen instead of starting the flip with A's frame and ending with B's frame.</p>
  
  <p>I know I can do 3D-like transforms to the view's layers, but I'm not sure which set of animation APIs I should use to accomplish this. One thing I tried is to modify the view's layer properties in the animations block of transitionWithView:duration:options:animations:completion: but that didn't work as it only seems to honor view property modifications.</p>
  
  <p>Can someone point me in the right direction? I'd much appreciate it.</p>
  
  <p>UPDATE: Here is my code thus far for this effect. You can see a video of what it does here: <a href="http://www.youtube.com/watch?v=-xNMD2fGRwg" rel="nofollow">http://www.youtube.com/watch?v=-xNMD2fGRwg</a></p>
  
  <p><code></p>
  
  <pre><code>CGRect frame = [[UIApplication easybookDelegate] rootViewController].view.bounds ;
  float statusHeight = [UIApplication sharedApplication].statusBarFrame.size.height ;
  frame.origin.y = statusHeight ;
  frame.size.height -= statusHeight ;
  self.view.frame = frame ; // self.view is view "B"
  
  // Put the snapshot as thet topmost view of our view
  UIImageView *imageView = [[UIImageView alloc] initWithImage:image] ; // image is a snapshot of view "A"
  imageView.frame = self.view.bounds ;
  [self.view addSubview:imageView] ;
  [self.view bringSubviewToFront:imageView] ;
  
  // Pre-transform our view (s=target/current, d=target-current)
  CGAffineTransform transform = CGAffineTransformIdentity ;
  
  // Translate our view
  CGPoint center  = CGPointMake(screenOrigin.x + (image.size.width/2.0), screenOrigin.y + (image.size.height/2.0)) ;
  float dX = center.x - self.view.center.x ;
  float dY = center.y - self.view.center.y ;
  NSLog( @"dx: %f, dy: %f" , dX, dY ) ;
  
  transform = CGAffineTransformTranslate(transform, dX, dY) ;
  
  // Scale our view
  float scaleWFactor = image.size.width / self.view.frame.size.width ;
  float scaleHFactor = image.size.height / self.view.frame.size.height ;
  transform = CGAffineTransformScale(transform,scaleWFactor, scaleHFactor) ;
  
  self.view.transform = transform ;
  
  [[[UIApplication easybookDelegate] rootViewController].view addSubview:self.view] ;
  
  // Perform the animation later since implicit animations don't seem to work due to
  // view "B" just being added above and hasn't had a chance to become visible. Right now
  // this is just on a timer for debugging purposes. It'll probably be moved elsewhere, probably
  // to view "B"'s -didMoveToSuperview
  double delayInSeconds = 0.3;
  dispatch_time_t popTime = dispatch_time(DISPATCH_TIME_NOW, delayInSeconds * NSEC_PER_SEC);
  dispatch_after(popTime, dispatch_get_main_queue(), ^(void){
      [UIView transitionWithView:self.view duration:3 options:UIViewAnimationOptionTransitionFlipFromRight| UIViewAnimationOptionCurveEaseOut animations:^(void) 
          {
          [imageView removeFromSuperview] ;
          self.view.transform = CGAffineTransformIdentity ;
          } 
          completion:^(BOOL finished){
                  [self.view removeFromSuperview] ;
                  [navController presentModalViewController:self animated:NO] ;
          }] ;
  });
  
  [imageView release];
  </code></pre>
  
  <p></code></p>