IOS实现翻转一个View显示presentViewController

  最近看到了一个比较好看的动画效果，就是通过点击了一个View，被点击的View会被翻转过来，然后在其背面显示出另一个ViewController的内容。就像一张两面的板子被翻转一样。于是在最近的项目里面就写了下这个效果：

  

思路是这样的，先将被显示的ViewController的内容渲染到一张图片上去。

然后在window上面添加一个新的View将被点的View的内容渲染成图片后显示在此新建的View上，并且调整新建的view的位置。

隐藏被点View，然后开始反转动画。为了简单起见动画分为2步，第一步为旋转90度。第二步开始反向旋转90度，但是在开始之前将ViewController的图片显示在该View上。

最后将Viewcontroller Present出来就好了。

具体看代码吧

给UIViewController建一个Category，这样使用就很方便了。

所有代码在下面：

- (void)flipView:(UIView *)view toPresentViewController:(UIViewController *)controller completion:(void (^)(void))completion {    [self retain];    [view retain];    [controller retain];    //调整大小    UIWindow *window = [UIApplication sharedApplication].keyWindow;    CGRect frame = window.frame;    frame.size.height -= 20;    frame.origin.y = 20;    controller.view.frame = frame;    [controller.view layoutIfNeeded];    //预渲染一遍    [self presentViewController:controller animated:NO completion:nil];    [controller dismissViewControllerAnimated:NO completion:0];        //获取将要显示的 View 的 Image    UIGraphicsBeginImageContextWithOptions(controller.view.frame.size, controller.view.opaque, 0.0);    [controller.view.layer renderInContext:UIGraphicsGetCurrentContext()];    UIImage *viewControllerImage = UIGraphicsGetImageFromCurrentImageContext();    UIGraphicsEndImageContext();    //保存被翻转的View 的 Image    UIGraphicsBeginImageContextWithOptions(view.frame.size, view.opaque, 0.0);    [view.layer renderInContext:UIGraphicsGetCurrentContext()];    UIImage *viewImgae = UIGraphicsGetImageFromCurrentImageContext();    UIGraphicsEndImageContext();        //坐标转化    frame = view.frame;    UIView *parentView = view.superview;    if (parentView == window) {    }else{        UIView *parentParentView = parentView.superview;        while (parentParentView&&parentView&&(parentView != self.view&&parentParentView != window)) {            frame = [parentParentView convertRect:frame fromView:parentView];            parentView=parentParentView;            parentParentView = parentParentView.superview;        }    }    frame = [window convertRect:frame fromView:parentView];        //包裹旋转的View    UIView      *imageLayout=[[UIView alloc]initWithFrame:window.bounds];    UIImageView *imageView = [[UIImageView alloc]initWithFrame:frame];    [imageView setImage:viewImgae];        [imageLayout addSubview:imageView];    [window addSubview:imageLayout];        [imageLayout release];    [imageView release];            CATransform3D rotationTransform = CATransform3DMakeRotation(M_PI*1.0f/2.0f, 0, 1, 0);        [view setHidden:YES];    //投影矩阵    CATransform3D perspective = CATransform3DIdentity;    perspective.m34 = -1.0/800.0;    imageLayout .layer.sublayerTransform = perspective;    imageLayout .layer .zPosition = 2000;        [UIView animateWithDuration:0.3 delay:0 options:UIViewAnimationOptionCurveEaseIn animations:^{                imageView.layer.transform = rotationTransform;            } completion:^(BOOL finished) {        [imageView setImage:viewControllerImage];        imageView.layer.transform = CATransform3DMakeRotation(-M_PI*1.0f/2.0f, 0, 1, 0);                [UIView animateWithDuration:0.3 delay:0 options:UIViewAnimationOptionCurveEaseOut animations:^{            imageView.layer.transform = CATransform3DIdentity;                        CGRect frame = window.frame;            frame.size.height -= 20;            frame.origin.y = 20;            imageView.frame =  frame;        } completion:^(BOOL finished) {            [self presentViewController:controller animated:NO completion:completion];                        [imageLayout removeFromSuperview];            [view setHidden:NO];            [view release];            [self release];            [controller release];        }];            }];}

这个版本也刚刚算能用吧，bug肯定是有的。

实际开发过程中还是有很多问题的，本人将开发中遇到的一些问题一起说下吧。

第一个就是恶心的渲染ViewController，首先从xib出来的view的frame很奇怪，有的时候只能人肉设置frame，还有就是当ViewController为Navigation时，如果给Navigation设过Appearance，如果不先经过present一下会有点显示的bug，就是appearance无效。

然后就是关于layer的zIndex的问题了，为了有立体效果，需要有点投射效果，即zIndex不能乱设。大家都知道zIndex小的layer会被zIndex大的layer遮住，但是我比较傻，一开始旋转的view总是只能显示一半，最后才发现原来会被遮住。

然后就想着提升zIndex，但是我已开始是将投射矩阵设在window上面，这样的话View的立体效果特别强，都快戳瞎狗眼了。苦于无解的时候突然想到可以用一个新的View把旋转的包起来，给那个View设置较大的zIndex，并且设置投射矩阵，结果就解决了问题。

以上