Cómo animar UIImageViews como apertura de puertas de escotilla

Question

Estoy tratando de crear una animación que se vea como 2 puertas francesas (o 2 puertas de escotilla) que se abren hacia el usuario.

Intenté utilizar la transición UIViewAnimationOptionTransitionFlipFromRight incorporada, pero el origen de la transición parece ser el centro del UIImageView en lugar del borde izquierdo. Básicamente tengo 2 UIImageViews que cada relleno tiene la pantalla. Me gustaría que la animación parezca que las UIImageViews se están levantando desde el centro de la pantalla hasta los bordes.

[UIView transitionWithView:leftView 
        duration:1.0 
        options:UIViewAnimationOptionTransitionFlipFromRight       
       animations:^ { leftView.alpha = 0; } 
       completion:^(BOOL finished) { 
        [leftView removeFromSuperview]; 
       }]; 

¿Alguien ha hecho algo así antes? ¡Cualquier ayuda sería increíble!

ACTUALIZACIÓN: código de trabajo gracias a Nick Lockwood

leftView.layer.anchorPoint = CGPointMake(0, 0.5); // hinge around the left edge 
leftView.frame = CGRectMake(0, 0, 160, 460); //reset view position 

rightView.layer.anchorPoint = CGPointMake(1.0, 0.5); //hinge around the right edge 
rightView.frame = CGRectMake(160, 0, 160, 460); //reset view position 

[UIView animateWithDuration:0.75 animations:^{ 
    CATransform3D leftTransform = CATransform3DIdentity; 
    leftTransform.m34 = -1.0f/500; //dark magic to set the 3D perspective 
    leftTransform = CATransform3DRotate(leftTransform, -M_PI_2, 0, 1, 0); 
    leftView.layer.transform = leftTransform; 

    CATransform3D rightTransform = CATransform3DIdentity; 
    rightTransform.m34 = -1.0f/500; //dark magic to set the 3D perspective 
    rightTransform = CATransform3DRotate(rightTransform, M_PI_2, 0, 1, 0); 
    rightView.layer.transform = rightTransform; 
}]; 

Answer 1

primero Añadir la biblioteca QuartzCore a su proyecto y #import <QuartzCore/QuartzCore.h>

Cada punto de vista tiene una propiedad layer con sub-propiedades que son animatable. Aquí es donde encontrarás todas las cosas realmente geniales cuando se trata de capacidades de animación (sugiero que leas las propiedades de clase CALayer que puedes configurar; esto hará volar tu mente; sombras dinámicas y suaves en cualquier vista?)

De todos modos, volviendo al tema. Para rotar las puertas abiertas en 3D, colóquelas como si estuvieran cerradas, de modo que cada puerta llene la mitad de la pantalla.

Ahora fijan sus propiedades como sigue view.layer.anchorPoint

leftDoorView.layer.anchorPoint = CGPoint(0, 0.5); // hinge around the left edge 
rightDoorView.layer.anchorPoint = CGPoint(1.0, 0.5); // hinge around the right edge 

Ahora aplique la siguiente animación

[UIView animateWithDuration:0.5 animations:^{ 
    CATransform3D leftTransform = CATransform3DIdentity; 
    leftTransform.m34 = -1.0f/500; //dark magic to set the 3D perspective 
    leftTransform = CATransform3DRotate(leftTransform, M_PI_2, 0, 1, 0); //rotate 90 degrees about the Y axis 
    leftDoorView.layer.transform = leftTransform; 
    //do the same thing but mirrored for the right door, that probably just means using -M_PI_2 for the angle. If you don't know what PI is, Google "radians" 
}]; 

Y eso debería hacerlo.

DESCARGO DE RESPONSABILIDAD: Realmente no he probado esto, por lo que los ángulos pueden ser al revés, y la perspectiva puede ser complicada, etc., pero al menos debería ser un buen comienzo.

ACTUALIZACIÓN: Curiosity se apoderó de mí. Aquí está el código de trabajo totalmente (esto supone que las puertas izquierda y derecha están dispuestas en la posición de cierre en el archivo de la boca):

- (void)viewDidLoad 
{ 
    [super viewDidLoad]; 

    leftDoorView.layer.anchorPoint = CGPointMake(0, 0.5); // hinge around the left edge 
    leftDoorView.center = CGPointMake(0.0, self.view.bounds.size.height/2.0); //compensate for anchor offset 
    rightDoorView.layer.anchorPoint = CGPointMake(1.0, 0.5); // hinge around the right edge 
    rightDoorView.center = CGPointMake(self.view.bounds.size.width,self.view.bounds.size.height/2.0); //compensate for anchor offset 
} 

- (IBAction)open 
{ 
    CATransform3D transform = CATransform3DIdentity; 
    transform.m34 = -1.0f/500; 
    leftDoorView.layer.transform = transform; 
    rightDoorView.layer.transform = transform; 

    [UIView animateWithDuration:0.5 animations:^{ 

     leftDoorView.layer.transform = CATransform3DRotate(transform, M_PI_2, 0, 1, 0); 
     rightDoorView.layer.transform = CATransform3DRotate(transform, -M_PI_2, 0, 1, 0); 
    }]; 
} 

- (IBAction)close 
{ 
    [UIView animateWithDuration:0.5 animations:^{ 

     CATransform3D transform = CATransform3DIdentity; 
     transform.m34 = -1.0f/500; 
     leftDoorView.layer.transform = transform; 
     rightDoorView.layer.transform = transform; 
    }]; 
}