Transiciones iPhone Curl Left y Curl Right

Question

Estoy buscando una manera de hacer una transición UIViewAnimationTransitionCurlUp o UIViewAnimationTransitionCurlDown en el iPhone, pero en lugar de arriba a abajo, hágalo de izquierda a derecha (o arriba / abajo en modo horizontal). He visto esto varias veces en internet, pero ninguno parece obtener una respuesta. Sin embargo, siento que esto es factible.

He intentado cambiar la transformación de View y la transformación de view.layer, pero eso no afectó la transición. Dado que la transición cambia cuando el dispositivo cambia de orientación, supongo que hay una manera de engañar al dispositivo para que use la transición horizontal en modo vertical y viceversa.

Answer 1

Realmente logré lograr este efecto cambiando la orientación de mi UIViewController. Lo extraño es que tenía mi controlador anidado en otro cuando no funcionaba, pero cuando lo configuré como el controlador de vista inmediato, funcionó.

Código que lo hace:

En un UIViewController que es el controlador de vista principal en el delegado de mi aplicación y solo permite la orientación horizontal (como puede ver en el segundo método a continuación) tengo lo siguiente:

-(void)goToPage:(int)page flipUp:(BOOL)flipUp {

     //do stuff...

     // start the animated transition
     [UIView beginAnimations:@"page transition" context:nil];
     [UIView setAnimationDuration:1.0];
     [UIView setAnimationTransition:flipUp ? UIViewAnimationTransitionCurlUp : UIViewAnimationTransitionCurlDown forView:self.view cache:YES];

     //insert your new subview
     //[self.view insertSubview:currentPage.view atIndex:self.view.subviews.count];

      // commit the transition animation
      [UIView commitAnimations];
}

- (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation {
     return (interfaceOrientation == UIInterfaceOrientationLandscapeRight);
}

Answer 2

Es posible hacer rizos en cualquiera de las cuatro direcciones usando una vista de contenedor. Establezca la transformación de la vista de contenedor en el ángulo que desee y luego haga el rizo agregando su vista a la vista de contenedor, no la vista principal de su aplicación que no tiene un marco transformado:

NSView* parent = viewController.view; // the main view
NSView* containerView = [[[UIView alloc] initWithFrame:parent.bounds] autorelease];
containerView.transform = CGAffineTransformMakeRotation(<your angle here, should probably be M_PI_2 * some integer>);
[parent addSubview:containerView]; 

[UIView beginAnimations:nil context:nil];
[UIView setAnimationTransition:UIViewAnimationTransitionCurlUp forView:containerView cache:YES];
[containerView addSubview:view];
[UIView commitAnimations];

Answer 3

También luché con esto. Para que el rizo venga de derecha o izquierda, puede crear una vista intermedia y transformarla. Entonces, supongamos que la vista que está haciendo la transición (myView) es hija de la ventana principal (parentView):

-parentView
-->myView

Insertará una vista intermedia en el medio (hecho fácilmente en el Creador de interfaces):

-parentView
-->containerView
--->myView

Luego, use el siguiente código para voltear el contenedor 90 grados a la izquierda y la vista en transición 90 grados a la derecha:

containerView.transform = CGAffineTransformMakeRotation(-M_PI_2);
myView.transform = CGAffineTransformMakeRotation(M_PI_2);

myView seguirá apareciendo en posición vertical para el usuario, pero la transición pensará que se aplica a 90 grados desde la izquierda.

Tenga en cuenta que, según la escala automática de sus vistas, es posible que tenga que corregir los tamaños de fotogramas después de aplicar la transformación, por ejemplo,

  containerView.frame = CGRectMake(0.0, 0.0, 768.0, 1024.0);
  myWebView.frame = CGRectMake(0.0, 0.0, 768.0, 1024.0);

Espero que esto ayude. Es lo más cercano que puede llegar a UIViewAnimationTransitionCurlLeft y UIViewAnimationTransitionCurlRight.

Answer 4

Probé la solución de fluXa en iOS5 (así que tuve que usar [UIView trans ......]) pero no funcionó: el rizo seguía subiendo o bajando. Aparentemente, la transición ahora no tiene en cuenta la transformación de la vista. Entonces, en caso de que alguien más quiera hacer el mismo truco en iOS5, la solución es agregar otro contenedor en el medio y animar la transición desde allí.

Aquí está mi código, que es un poco específico ya que quiero enroscarme 'hacia arriba' a la izquierda, pero con la esquina inferior curvada. Como si estuviera arrancando una página de un cuaderno.

UIView* parent = self.view; // the main view
CGRect r = flipRectSize(parent.bounds);
UIView* containerView = [[UIView alloc] initWithFrame:r];
CGAffineTransform t = CGAffineTransformMakeRotation(-M_PI_2);
t = CGAffineTransformTranslate(t, -80, -80);
containerView.transform = CGAffineTransformScale(t, -1, 1);
[parent addSubview:containerView]; 

UIView* container2 = [[UIView alloc] initWithFrame:r];
[containerView addSubview:container2]; 

UIImageView* v = [[UIImageView alloc] initWithFrame:r];
v.image = [UIImage imageWithCGImage:contents.CGImage scale:contents.scale orientation:UIImageOrientationLeftMirrored];
[container2 addSubview:v];

dispatch_after(dispatch_time(DISPATCH_TIME_NOW, 0.001 * NSEC_PER_SEC), dispatch_get_main_queue(), ^{
    [UIView transitionWithView:container2
                      duration:DURATION_CURL_ANIMATION
                       options:UIViewAnimationOptionTransitionCurlUp
                    animations:^{
                        [v removeFromSuperview];
                    } completion:^(BOOL finished) {
                        if (completion) {
                            completion(finished);
                        }
                        [containerView removeFromSuperview];}];});

Notas:

1. Debo admitir que el traductor de transformación afín (80,80) no tiene sentido en mi mente, pero es necesario para iPhone, probablemente no funcionará en iPad.
2. flipSizeRect voltea el ancho y la altura de un rectángulo (ya lo tienes, ¿verdad?)
3. el dispatch_after es necesario porque agregué el contenedor y luego quiero eliminar una vista de la jerarquía. Si dejo fuera el despacho, nada anima. Mi mejor conjetura es que primero debemos dejar que el sistema pase un diseño antes de que podamos animar una eliminación.

Answer 5

No creo que haya una manera más allá de escribir una animación personalizada.

Más importante aún, probablemente no deberías intentarlo. La curvatura hacia arriba y hacia abajo son parte de la gramática de la interfaz de usuario que le dice al usuario que una vista se está levantando o bajando sobre la vista existente. Se supone que es como una nota adhesiva que se deja y luego se quita. Una curva izquierda & Lt; - & Gt; derecha probablemente se interpretará como algo así como arrancar una página de un libro. Confundirá a los usuarios.

Siempre que intente hacer algo en la interfaz que la API estándar no hace fácilmente, debe preguntarse si un método tan novedoso comunicará algo importante para el usuario y si es similar a la gramática de la interfaz existente. Si no, entonces no deberías molestarte.

Las interfaces inusuales tienen un factor sorpresa inicial pero generan frustración y errores en el uso diario. También pueden hacer que Apple rechace tu aplicación.