iOS - flip animation, small to large

I am trying to simulate the flip animation seen in the iTunes iPad app. On the main Featured page, if you tap on one of the small posters in the New Releases list, it will flip open to show all the details of the movie.

When the poster is tapped I do this:

//...create newView

[self.view addSubview:poster]; //because the poster was previously in a scrollview

[UIView transitionWithView:self.view duration:3
                   options:UIViewAnimationOptionTransitionFlipFromLeft animations:^{
                       [poster removeFromSuperview];
                       [self.view addSubview:newView];
                   }
                completion:NULL];

But... the ENTIRE view flips, instead of just the poster. And it flips vertically instead of horizontally, even though I have specified FlipFromLeft. What am I doing wrong?

EDIT: It seems that you have to use some kind of container view to do this. So I made one, added the poster to it, then created a dummy UIView for testing:

CGPoint newPoint = [self.view convertPoint:CGPointMake(poster.frame.origin.x, poster.frame.origin.y) fromView:[poster superview]];
poster.frame = CGRectMake(0, 0, poster.frame.size.width, poster.frame.size.height);

UIView *containerView = [[UIView alloc] initWithFrame:CGRectMake(newPoint.x, newPoint.y, poster.frame.size.width, poster.frame.size.height)];
[self.view addSubview:containerView];
[containerView addSubview:poster];


UIView *testView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, containerView.frame.size.width, containerView.frame.size.height)];
testView.backgroundColor = [UIColor redColor];

[UIView transitionWithView:containerView duration:3
                   options:UIViewAnimationOptionTransitionFlipFromLeft animations:^{
                       [poster removeFromSuperview];
                       [containerView addSubview:testView];
                   }
                completion:NULL];

Now, the red UIView appears 开发者_Go百科in place of the poster, but there is no Flipping animation at all. Why not?

You are telling the view to transition with self.view, so it's no wonder why the entire view is animating. Try telling the transition to animate with the posters view instead.

[UIView transitionWithView:poster.view duration:3
                   options:UIViewAnimationOptionTransitionFlipFromLeft animations:^{
                       [poster removeFromSuperview];
                       [self.view addSubview:newView];
                   }
                completion:NULL];

I created an UIViewController (named: transitionView) with two UIImageView (named: fromImageView and toImageView). I added the transitionView to my viewController in viewDidLoad and I set alpha to 0. I create both from the two UIView an image with this:

- (UIImage *) imageFromView: (UIView *) view {
    CGFloat alpha = [view alpha];
    [view setAlpha: 1.0];
    CGSize pageSize = view.frame.size;
    UIGraphicsBeginImageContext(pageSize);

    CGContextRef resizedContext = UIGraphicsGetCurrentContext();
    [view.layer renderInContext: resizedContext];
    UIImage *image = UIGraphicsGetImageFromCurrentImageContext();

    UIGraphicsEndImageContext();
    [view setAlpha: alpha];
    return image;
}

and here is my flip code with resizing:

- (void) flipFromView: (UIView *) fromView toView: (UIView *) toView {
    // Warning: positions is wrong when your image (or view) is in UIScrollView...
    CGRect frame = CGRectMake(-8.0, 30.0, 336.0, 380.0); // resizing the fromView if the image is small...
    CGFloat interval = 1.0;

    [[transitionView view] setAlpha: 1.0]; //

    UIImage *fromViewImage = [self imageFromView: fromView];
    UIImageView *fromImageView = [transitionView fromImageView];
    [fromImageView setImage: fromViewImage];
    [fromImageView setFrame: [fromView frame]];


    UIImage *toViewImage = [self imageFromView: toView];
    UIImageView *toImageView = [transitionView toImageView];
    [toImageView setImage: toViewImage];
    [toImageView setFrame: frame];

    [fromView setHidden: YES]; // hide original while animating

    toImageView.layer.transform = CATransform3DMakeRotation(M_PI_2, 0.0, 1.0, 0.0);

    [UIView animateWithDuration: interval
                          delay: 0.0
                        options: UIViewAnimationOptionCurveEaseIn
                     animations: ^{
                         [fromImageView setFrame: frame];
                         fromImageView.layer.transform = CATransform3DMakeRotation(M_PI_2, 0.0, 1.0, 0.0);
                     } completion: ^(BOOL finished) {

                     }
     ];

    [UIView animateWithDuration: interval
                          delay: interval // wait to previous animation ending
                        options: UIViewAnimationOptionCurveEaseOut
                     animations: ^{
                         toImageView.layer.transform = CATransform3DMakeRotation(M_PI_2,  0.0, 0.0, 0.0);
                         toImageView.frame = [toView frame];
                     } completion: ^(BOOL finished) {
                         [toView setAlpha: 1.0];
                         [fromView setHidden: NO];
                     }
     ];
}

And sorry my bad english, I don't speak english!