ciclo - ¿Cómo hago una transición de expansión/contrato entre las vistas en iOS?

connect appstore

Question

Estoy tratando de hacer una animación de transición en iOS donde un controlador de vista o vista parece expandirse para llenar toda la pantalla, y luego volver a contratar a su posición anterior cuando haya terminado. No estoy seguro de cómo se llama oficialmente este tipo de transición, pero puede ver un ejemplo en la aplicación de YouTube para iPad. Cuando toca una de las miniaturas de resultados de búsqueda en la cuadrícula, se expande desde la miniatura y luego vuelve a contraerse en la miniatura cuando vuelve a la búsqueda.

Me interesan dos aspectos de esto:

1. ¿Cómo harías esto al hacer la transición entre una vista y otra? En otras palabras, si la vista A ocupa un área de la pantalla, ¿cómo la pasaría a la vista B, que ocupará toda la pantalla, y viceversa?

2. ¿Cómo pasaría a una vista modal de esta manera? En otras palabras, si UIViewController C se muestra actualmente y contiene la vista D que ocupa parte de la pantalla, ¿cómo se ve como que la vista D se está convirtiendo en UIViewController E, que se presenta modalmente sobre C?

Editar: Estoy agregando una recompensa para ver si eso hace que esta pregunta sea más amorosa.

Editar: Tengo un código fuente que hace esto, y la idea de Anomie funciona como un amuleto, con algunos refinamientos. Primero traté de animar la vista del controlador modal (E), pero no produjo el efecto de sentir que estás enfocando en la pantalla, porque no estaba expandiendo todo el contenido de la vista de miniaturas en (C). Entonces traté de animar la vista del controlador original (C), pero el redibujado de la misma creó una animación espasmódica, y las texturas de fondo no se ampliaron correctamente. Entonces, lo que terminé haciendo es tomar una imagen del controlador de vista original (C) y acercarlo a la vista modal (E). Este método es sustancialmente más complejo que el original, ¡pero se ve bien! Creo que es así como iOS debe hacer sus transiciones internas también. De todos modos, aquí está el código, que he escrito como una categoría en UIViewController.

UIViewController + Transitions.h:

#import <Foundation/Foundation.h>

@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

UIViewController + Transitions.m:

#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 > 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

Puede usar algo como esto en una subclase UIViewController:

#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]]) &&
      (animated)) {

    [self dismissModalViewControllerToView:thumbnailView];

  }
  else {
    [super dismissModalViewControllerAnimated:animated];
  }
}

Editar: Bueno, resulta que realmente no maneja orientaciones de interfaz que no sean retratos. Así que tuve que cambiar a la animación de la transición en una ventana UI usando un controlador de vista para pasar la rotación. Vea la versión mucho más complicada a continuación:

UIViewController + Transitions.m:

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

}

¡Uf! Pero ahora se parece a la versión de Apple sin usar ninguna API restringida. Además, funciona incluso si la orientación cambia mientras que la vista modal está al frente.

Answer 1

1. Hacer el efecto es simple. Usted toma la vista de tamaño completo, inicializa su transform y se center para colocarla en la parte superior de la miniatura, agregarla a la supervista apropiada y luego, en un bloque de animación, reiniciar la transform y center para colocarla en la posición final. Para descartar la vista, simplemente haga lo contrario: en un bloque de animación, configure transform y center para colocarlo en la parte superior de la miniatura, y luego elimínelo por completo en el bloque de finalización.

   Tenga en cuenta que intentar hacer zoom desde un punto (es decir, un rectángulo con 0 de ancho y 0 de altura) arruinará las cosas. Si quiere hacerlo, amplíe desde un rectángulo con ancho / alto algo así como 0.00001 en su lugar.

2. Una forma sería hacer lo mismo que en # 1, y luego llamar a presentModalViewController:animated: con NO animado para presentar el controlador de vista real cuando la animación esté completa (lo cual, si se hace bien, no daría lugar a diferencias visibles debido a la presentModalViewController:animated: llamada). Y dismissModalViewControllerAnimated: con NO seguido de lo mismo que en el # 1 para descartar.

   O bien, podría manipular la vista del controlador de vista modal directamente como en # 1, y aceptar que parentViewController , interfaceOrientation y algunas otras cosas simplemente no funcionarán en el controlador de vista modal ya que Apple no nos permite crear nuestros propios controladores de vista de contenedor .

Answer 2

Después de ver la animación del iPad de Youtube, descubrí que es solo una ilusión. Digamos que hay un SearchViewController para los resultados de búsqueda, y un DetailViewController para el video en sí, y la información adicional del video.

DetailViewController tiene un método como - (id)initWithFullscreen que inicia el controlador de vista utilizando el espacio de pantalla completa con el video.

Entonces la secuencia es así:

1. SearchViewController presenta sus resultados.
2. El usuario hace clic en un video.
3. DetailViewController se crea con initWithFullscreen , pero no se presenta
4. Comienza la animación "Acercar". (Observe que todavía estamos en SearchViewController, y esta animación es solo una simple animación de Vista)
5. La animación "Zoom in" finaliza, presenta DetailViewController con animated:NO (como Anomie mencionó).
6. El DetailViewController ahora se presenta y usa espacio completo.

No parece que la aplicación de youtube esté haciendo algo más elegante, el regalo fue que la animación "Acercar" se acerca a un cuadrado negro, antes de presentar el video completo.