Come animare UIImageViews come le porte del boccaporto che si aprono

Question

Sto provando a creare un'animazione che assomiglierebbe a 2 porte francesi (o 2 portelli) che si aprono verso l'utente.

Ho provato a utilizzare la transizione incorporata di UIViewAnimationOptionTransitionFlipFromRight, ma l'origine della transizione sembra essere il centro di UIImageView anziché il bordo sinistro. Fondamentalmente ho 2 UIImageViews che ogni riempimento ha lo schermo. Mi piacerebbe che l'animazione assomigli a UIImageViews che si alza dal centro dello schermo fino ai bordi.

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

Qualcuno ha mai fatto qualcosa del genere? Qualsiasi aiuto sarebbe fantastico!

UPDATE: codice di lavoro grazie 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

Prima aggiungere la libreria QuartzCore al progetto e #import <QuartzCore/QuartzCore.h>

Ogni vista ha una proprietà layer con sub-proprietà che sono animatable. Questo è dove troverai tutte le cose veramente interessanti quando si tratta di funzionalità di animazione (ti suggerisco di leggere le proprietà della classe CALayer che puoi impostare - ti lascerà a bocca aperta - ombre morbide dinamiche su qualsiasi vista?)

Comunque, torniamo sull'argomento. Per ruotare le porte in 3D, posizionale dapprima come se fossero chiuse, in modo che ciascuna porta riempia metà dello schermo.

Ora impostare le loro proprietà 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 

Ora applicare la seguente animazione

[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" 
}]; 

come segue, e che dovrebbe farlo.

NOTA BENE: Non ho ancora provato questo, quindi gli angoli possono essere all'indietro, e la prospettiva potrebbe essere vaga, ecc. Ma dovrebbe essere un buon inizio almeno.

AGGIORNAMENTO: La curiosità ha avuto la meglio su di me. Qui è completamente il codice di lavoro (ciò presuppone che le porte a sinistra ea destra sono disposti in posizione di chiusura nel file NIB):

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