两个UIViews之间的自定义转换 [英] Custom transition between two UIViews

问题描述

我有两个观点A和B。在窗口中间浮动（它不是全屏）。 B，将取代A的视图是全屏。我想编写一个自定义过渡，翻转A以显示背面的B，但同时缩放翻转矩形，以便在翻转完成时，B为全屏。

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.

我尝试使用transitionFromView提供的翻转过渡：toView：duration：options：completion，但我只能翻转整个屏幕而不是启动用A的帧翻转并以B的帧结束。

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.

我知道我可以对视图的图层进行类似3D的转换，但我不确定哪组动画API我应该用它来做到这一点。我尝试过的一件事是在transitionWithView的动画块中修改视图的图层属性：duration：options：animations：completion：但这不起作用，因为它似乎只是为了尊重视图属性修改。

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.

有人能指出我正确的方向吗？我非常感激。

Can someone point me in the right direction? I'd much appreciate it.

更新：到目前为止，这是我的代码。您可以在此处观看视频： http://www.youtube.com/watch ？v = -xNMD2fGRwg

UPDATE: Here is my code thus far for this effect. You can see a video of what it does here: http://www.youtube.com/watch?v=-xNMD2fGRwg

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];

推荐答案

我以前做过这个。以下是我如何做到的要点：

I've done this before. Here's the gist of how I did it:

1. 查看A在屏幕上


2. 创建视图B ，给它一个框架，使其全屏，但不要将其添加到屏幕


3. 视图B有一个UIImageView，因为它是最顶层的视图



4. 捕获视图A的UIImage，并将其设置为视图B的图像视图的图像

1. View A is on screen
2. Create View B, give it a frame that makes it fullscreen, but don't add it to the screen yet
3. View B has a UIImageView as it's topmost view

4. Capture a UIImage of View A, and set it as the image of View B's image view

UIGraphicsBeginImageContext(view.bounds.size); 
[viewA.layer renderInContext:UIGraphicsGetCurrentContext()]; 
UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
viewB.imageView.image = image;

设置视图B的变换（缩放和平移），使其缩小到大小查看A并位于屏幕上视图A的位置

Set View B's transform (scale and translation) so that it is shrunk to the size of View A and is positioned where View A is on the screen

• 设置 [UIView setAnimationTransition：UIViewAnimationTransitionFlipFromLeft forView：ViewB


• set View B转换为CGAffineTransformIdentity


• 删除从View B查看B的imageview

结果是一个看起来像View的动画A正在翻转和缩放以填充屏幕，视图B作为对面。

The result is an animation that looks like View A is flipping over and zooming to fill the screen with View B as the opposite side.

这篇关于两个UIViews之间的自定义转换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！