Databases
StackOverflow2013
Postsdbo
POHow do I make an expand/contract transition between views on iOS?
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow do I make an expand/contract transition between views on iOS?
    primarykey
    data
    text
    <p>I'm trying to make a transition animation in iOS where a view or view controller appears to expand to fill the whole screen, then contract back to its former position when done. I'm not sure what this type of transition is officially called, but you can see an example in the YouTube app for iPad. When you tap one of the search result thumbnails on the grid, it expands from the thumbnail, then contracts back into the thumbnail when you return to the search.</p> <p>I'm interested in two aspects of this:</p> <ol> <li><p>How would you make this effect when transitioning between one view and another? In other words, if view A takes up some area of the screen, how would you transition it to view B which takes up the whole screen, and vice versa?</p></li> <li><p>How would you transition to a modal view this way? In other words, if UIViewController C is currently showing and contains view D which takes up part of the screen, how do you make it look like view D is turning into UIViewController E which is presented modally on top of C?</p></li> </ol> <p><strong>Edit:</strong> I'm adding a bounty to see if that gets this question more love.</p> <p><strong>Edit:</strong> I've got some source code that does this, and Anomie's idea works like a charm, with a few refinements. I had first tried animating the modal controller's view (E), but it didn't produce the effect of feeling like you're zooming into the screen, because it wasn't expanding all the stuff around the thumbnail view in (C). So then I tried animating the original controller's view (C), but the redrawing of it made for a jerky animation, and things like background textures did not zoom properly. So what I wound up doing is taking an image of the the original view controller (C) and zooming that inside the modal view (E). This method is substantially more complex than my original one, but it does look nice! I think it's how iOS must do its internal transitions as well. Anyway, here's the code, which I've written as a category on UIViewController.</p> <p>UIViewController+Transitions.h:</p> <pre><code>#import &lt;Foundation/Foundation.h&gt; @interface UIViewController (Transitions) // make a transition that looks like a modal view // is expanding from a subview - (void)expandView:(UIView *)sourceView toModalViewController:(UIViewController *)modalViewController; // make a transition that looks like the current modal view // is shrinking into a subview - (void)dismissModalViewControllerToView:(UIView *)view; @end </code></pre> <p>UIViewController+Transitions.m:</p> <pre><code>#import "UIViewController+Transitions.h" @implementation UIViewController (Transitions) // capture a screen-sized image of the receiver - (UIImageView *)imageViewFromScreen { // make a bitmap copy of the screen UIGraphicsBeginImageContextWithOptions( [UIScreen mainScreen].bounds.size, YES, [UIScreen mainScreen].scale); // get the root layer CALayer *layer = self.view.layer; while(layer.superlayer) { layer = layer.superlayer; } // render it into the bitmap [layer renderInContext:UIGraphicsGetCurrentContext()]; // get the image UIImage *image = UIGraphicsGetImageFromCurrentImageContext(); // close the context UIGraphicsEndImageContext(); // make a view for the image UIImageView *imageView = [[[UIImageView alloc] initWithImage:image] autorelease]; return(imageView); } // make a transform that causes the given subview to fill the screen // (when applied to an image of the screen) - (CATransform3D)transformToFillScreenWithSubview:(UIView *)sourceView { // get the root view UIView *rootView = sourceView; while (rootView.superview) rootView = rootView.superview; // convert the source view's center and size into the coordinate // system of the root view CGRect sourceRect = [sourceView convertRect:sourceView.bounds toView:rootView]; CGPoint sourceCenter = CGPointMake( CGRectGetMidX(sourceRect), CGRectGetMidY(sourceRect)); CGSize sourceSize = sourceRect.size; // get the size and position we're expanding it to CGRect screenBounds = [UIScreen mainScreen].bounds; CGPoint targetCenter = CGPointMake( CGRectGetMidX(screenBounds), CGRectGetMidY(screenBounds)); CGSize targetSize = screenBounds.size; // scale so that the view fills the screen CATransform3D t = CATransform3DIdentity; CGFloat sourceAspect = sourceSize.width / sourceSize.height; CGFloat targetAspect = targetSize.width / targetSize.height; CGFloat scale = 1.0; if (sourceAspect &gt; targetAspect) scale = targetSize.width / sourceSize.width; else scale = targetSize.height / sourceSize.height; t = CATransform3DScale(t, scale, scale, 1.0); // compensate for the status bar in the screen image CGFloat statusBarAdjustment = (([UIApplication sharedApplication].statusBarFrame.size.height / 2.0) / scale); // transform to center the view t = CATransform3DTranslate(t, (targetCenter.x - sourceCenter.x), (targetCenter.y - sourceCenter.y) + statusBarAdjustment, 0.0); return(t); } - (void)expandView:(UIView *)sourceView toModalViewController:(UIViewController *)modalViewController { // get an image of the screen UIImageView *imageView = [self imageViewFromScreen]; // insert it into the modal view's hierarchy [self presentModalViewController:modalViewController animated:NO]; UIView *rootView = modalViewController.view; while (rootView.superview) rootView = rootView.superview; [rootView addSubview:imageView]; // make a transform that makes the source view fill the screen CATransform3D t = [self transformToFillScreenWithSubview:sourceView]; // animate the transform [UIView animateWithDuration:0.4 animations:^(void) { imageView.layer.transform = t; } completion:^(BOOL finished) { [imageView removeFromSuperview]; }]; } - (void)dismissModalViewControllerToView:(UIView *)view { // take a snapshot of the current screen UIImageView *imageView = [self imageViewFromScreen]; // insert it into the root view UIView *rootView = self.view; while (rootView.superview) rootView = rootView.superview; [rootView addSubview:imageView]; // make the subview initially fill the screen imageView.layer.transform = [self transformToFillScreenWithSubview:view]; // remove the modal view [self dismissModalViewControllerAnimated:NO]; // animate the screen shrinking back to normal [UIView animateWithDuration:0.4 animations:^(void) { imageView.layer.transform = CATransform3DIdentity; } completion:^(BOOL finished) { [imageView removeFromSuperview]; }]; } @end </code></pre> <p>You might use it something like this in a UIViewController subclass:</p> <pre><code>#import "UIViewController+Transitions.h" ... - (void)userDidTapThumbnail { DetailViewController *detail = [[DetailViewController alloc] initWithNibName:nil bundle:nil]; [self expandView:thumbnailView toModalViewController:detail]; [detail release]; } - (void)dismissModalViewControllerAnimated:(BOOL)animated { if (([self.modalViewController isKindOfClass:[DetailViewController class]]) &amp;&amp; (animated)) { [self dismissModalViewControllerToView:thumbnailView]; } else { [super dismissModalViewControllerAnimated:animated]; } } </code></pre> <p><strong>Edit:</strong> Well, it turns out that doesn't really handle interface orientations other than portrait. So I had to switch to animating the transition in a UIWindow using a view controller to pass along the rotation. See the much more complicated version below:</p> <p>UIViewController+Transitions.m:</p> <pre><code>@interface ContainerViewController : UIViewController { } @end @implementation ContainerViewController - (BOOL)shouldAutorotateToInterfaceOrientation: (UIInterfaceOrientation)toInterfaceOrientation { return(YES); } @end ... // get the screen size, compensating for orientation - (CGSize)screenSize { // get the size of the screen (swapping dimensions for other orientations) CGSize size = [UIScreen mainScreen].bounds.size; if (UIInterfaceOrientationIsLandscape(self.interfaceOrientation)) { CGFloat width = size.width; size.width = size.height; size.height = width; } return(size); } // capture a screen-sized image of the receiver - (UIImageView *)imageViewFromScreen { // get the root layer CALayer *layer = self.view.layer; while(layer.superlayer) { layer = layer.superlayer; } // get the size of the bitmap CGSize size = [self screenSize]; // make a bitmap to copy the screen into UIGraphicsBeginImageContextWithOptions( size, YES, [UIScreen mainScreen].scale); CGContextRef context = UIGraphicsGetCurrentContext(); // compensate for orientation if (self.interfaceOrientation == UIInterfaceOrientationLandscapeLeft) { CGContextTranslateCTM(context, size.width, 0); CGContextRotateCTM(context, M_PI_2); } else if (self.interfaceOrientation == UIInterfaceOrientationLandscapeRight) { CGContextTranslateCTM(context, 0, size.height); CGContextRotateCTM(context, - M_PI_2); } else if (self.interfaceOrientation == UIInterfaceOrientationPortraitUpsideDown) { CGContextTranslateCTM(context, size.width, size.height); CGContextRotateCTM(context, M_PI); } // render the layer into the bitmap [layer renderInContext:context]; // get the image UIImage *image = UIGraphicsGetImageFromCurrentImageContext(); // close the context UIGraphicsEndImageContext(); // make a view for the image UIImageView *imageView = [[[UIImageView alloc] initWithImage:image] autorelease]; // done return(imageView); } // make a transform that causes the given subview to fill the screen // (when applied to an image of the screen) - (CATransform3D)transformToFillScreenWithSubview:(UIView *)sourceView includeStatusBar:(BOOL)includeStatusBar { // get the root view UIView *rootView = sourceView; while (rootView.superview) rootView = rootView.superview; // by default, zoom from the view's bounds CGRect sourceRect = sourceView.bounds; // convert the source view's center and size into the coordinate // system of the root view sourceRect = [sourceView convertRect:sourceRect toView:rootView]; CGPoint sourceCenter = CGPointMake( CGRectGetMidX(sourceRect), CGRectGetMidY(sourceRect)); CGSize sourceSize = sourceRect.size; // get the size and position we're expanding it to CGSize targetSize = [self screenSize]; CGPoint targetCenter = CGPointMake( targetSize.width / 2.0, targetSize.height / 2.0); // scale so that the view fills the screen CATransform3D t = CATransform3DIdentity; CGFloat sourceAspect = sourceSize.width / sourceSize.height; CGFloat targetAspect = targetSize.width / targetSize.height; CGFloat scale = 1.0; if (sourceAspect &gt; targetAspect) scale = targetSize.width / sourceSize.width; else scale = targetSize.height / sourceSize.height; t = CATransform3DScale(t, scale, scale, 1.0); // compensate for the status bar in the screen image CGFloat statusBarAdjustment = includeStatusBar ? (([UIApplication sharedApplication].statusBarFrame.size.height / 2.0) / scale) : 0.0; // transform to center the view t = CATransform3DTranslate(t, (targetCenter.x - sourceCenter.x), (targetCenter.y - sourceCenter.y) + statusBarAdjustment, 0.0); return(t); } - (void)expandView:(UIView *)sourceView toModalViewController:(UIViewController *)modalViewController { // get an image of the screen UIImageView *imageView = [self imageViewFromScreen]; // show the modal view [self presentModalViewController:modalViewController animated:NO]; // make a window to display the transition on top of everything else UIWindow *window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds]; window.hidden = NO; window.backgroundColor = [UIColor blackColor]; // make a view controller to display the image in ContainerViewController *vc = [[ContainerViewController alloc] init]; vc.wantsFullScreenLayout = YES; // show the window [window setRootViewController:vc]; [window makeKeyAndVisible]; // add the image to the window [vc.view addSubview:imageView]; // make a transform that makes the source view fill the screen CATransform3D t = [self transformToFillScreenWithSubview:sourceView includeStatusBar:(! modalViewController.wantsFullScreenLayout)]; // animate the transform [UIView animateWithDuration:0.4 animations:^(void) { imageView.layer.transform = t; } completion:^(BOOL finished) { // we're going to crossfade, so change the background to clear window.backgroundColor = [UIColor clearColor]; // do a little crossfade [UIView animateWithDuration:0.25 animations:^(void) { imageView.alpha = 0.0; } completion:^(BOOL finished) { window.hidden = YES; [window release]; [vc release]; }]; }]; } - (void)dismissModalViewControllerToView:(UIView *)view { // temporarily remove the modal dialog so we can get an accurate screenshot // with orientation applied UIViewController *modalViewController = [self.modalViewController retain]; [self dismissModalViewControllerAnimated:NO]; // capture the screen UIImageView *imageView = [self imageViewFromScreen]; // put the modal view controller back [self presentModalViewController:modalViewController animated:NO]; [modalViewController release]; // make a window to display the transition on top of everything else UIWindow *window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds]; window.hidden = NO; window.backgroundColor = [UIColor clearColor]; // make a view controller to display the image in ContainerViewController *vc = [[ContainerViewController alloc] init]; vc.wantsFullScreenLayout = YES; // show the window [window setRootViewController:vc]; [window makeKeyAndVisible]; // add the image to the window [vc.view addSubview:imageView]; // make the subview initially fill the screen imageView.layer.transform = [self transformToFillScreenWithSubview:view includeStatusBar:(! self.modalViewController.wantsFullScreenLayout)]; // animate a little crossfade imageView.alpha = 0.0; [UIView animateWithDuration:0.15 animations:^(void) { imageView.alpha = 1.0; } completion:^(BOOL finished) { // remove the modal view [self dismissModalViewControllerAnimated:NO]; // set the background so the real screen won't show through window.backgroundColor = [UIColor blackColor]; // animate the screen shrinking back to normal [UIView animateWithDuration:0.4 animations:^(void) { imageView.layer.transform = CATransform3DIdentity; } completion:^(BOOL finished) { // hide the transition stuff window.hidden = YES; [window release]; [vc release]; }]; }]; } </code></pre> <p>Whew! But now it looks just about like Apple's version without using any restricted APIs. Also, it works even if the orientation changes while the modal view is in front.</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USJesse Crossen
    1. USJesse Crossen
    plurals
    1. This table or related slice is empty.
    1. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POHow do I make an expand/contract transition between views on iOS?
      1. USJesse Crossen
      1. VTBountyStart
    2. VO
      singulars
      1. POHow do I make an expand/contract transition between views on iOS?
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. POHow do I make an expand/contract transition between views on iOS?
      1. This table or related slice is empty.
      1. VTUpMod
    1. This table or related slice is empty.
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload