2012-02-04 32 views
13

Próbuję utworzyć animację, która będzie wyglądać jak 2 francuskie drzwi (lub 2 drzwi luków) otwierające się w kierunku użytkownika.Jak animować UIImageViews jak otwierać drzwi luków

Próbowałem użyć wbudowanego przejścia UIViewAnimationOptionTransitionFlipFromRight, ale początek przejścia wydaje się być centrum UIImageView, a nie lewej krawędzi. Zasadniczo mam 2 UIImageViews, które każde wypełnienie ma ekranu. Chciałbym, aby animacja wyglądała tak, jak UIImageViews podnoszą się ze środka ekranu do krawędzi.

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

Czy ktoś wcześniej coś takiego zrobił? Każda pomoc będzie niesamowita!

UPDATE: kod roboczych dzięki 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; 
}]; 
+0

Uwaga: można zamienić znak minus na obroty lewe i prawe drzwi, aby uczynić drzwi otwierają się do wewnątrz. –

Odpowiedz

26

Pierwszy dodać bibliotekę QuartzCore do projektu i #import <QuartzCore/QuartzCore.h>

Każdy widok ma layer nieruchomość podrzędnych właściwości, które są animatable. Tutaj znajdziesz wszystkie naprawdę fajne rzeczy, jeśli chodzi o możliwości animacji (proponuję odczytać właściwości klasy CALayer, które możesz ustawić - to rozwali twój umysł - dynamiczne miękkie cienie w dowolnym widoku?)

Wracam do tematu. Aby otworzyć drzwi w 3D, najpierw umieść je tak, jakby były zamknięte, tak aby każde drzwi wypełniały połowę ekranu.

teraz ustawić swoje view.layer.anchorPoint właściwości

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 

Teraz stosuje się następujące animacji

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

następująco I to powinno wystarczyć.

OŚWIADCZENIE: Tego właściwie nie przetestowałem, więc kąty mogą być cofnięte, a perspektywa może być nieprzyjemna itp., Ale przynajmniej powinien to być dobry początek.

AKTUALIZACJA: Ciekawość stała się lepsza ode mnie. Tutaj jest w pełni działający kod (zakładając, że drzwi lewe i prawe są określone w pozycji zamkniętej w pliku 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; 
    }]; 
} 
+1

+1 za * ciemną magię, aby ustawić perspektywę 3D * – Till

+1

"ciemna magia" brzmiała lepiej niż "Nie mam ochoty wyjaśniać matryc w tej chwili" ;-) –

+4

Właściwie powinienem był powiedzieć "nikt nie może być poinformowany co Matrix jest ... " –