Animacja rdzenia iOS - składanie warstwy

Question

Korzystając z animacji rdzenia, chciałbym spasować obiekt UIView (to jest) w środku. tj. ustawiam punkt kontrolny jako (0,5,0.5) & zwiń warstwę. Ten obraz, który stworzyłem w programie Photoshop może dać efekt szukam -

tak, to co się dzieje jest warstwa jest składana na jego środku, jak fałda dzieje się trochę perspektywy jest stosowany (niesławny m34!). Początkowo widok jest równoległy w płaszczyźnie X-Y z osią Z patrząc prosto do użytkownika. Podczas składania, dolna połowa & górna połowa w tym samym czasie cofa się (z pewną perspektywą, aby nadać głębię & efekt 3D), aż cała warstwa będzie (równoległa) w płaszczyźnie X-Z. Zwróć uwagę, że gdy warstwa jest równoległa w płaszczyźnie X-Z, użytkownik nie będzie mógł zobaczyć warstwy. Ale to jest w porządku, to efekt, którego szukam. A UIView znikając po złożeniu na środku.

Jak można to zrobić w iOS? Bez użycia 2 różnych warstw (dla dna & dla góry)? Każda pomoc jest mile widziane ...

Aktualizacja: W @miamk zwraca uwagę, jest to ten sam efekt UI stosowane w „nasz wybór” aplikacji lub „Flipboard” App. Przez ostatnie 8 godzin budzę moje rozumowanie, na razie bezowocne. KAŻDY pomysł jest doceniany. Dzięki ...

UPDATE: Oferuję nagrodę za to, aby uzyskać bardziej szczegółowe odpowiedzi. Chciałbym zobaczyć -

1. Próbki kodu.
2. Poradź od ludzi, którzy zrobili coś takiego.
3. Nawet droga do osiągnięcia tego w sposób szczegółowy (algo) jest bardzo doceniana.

Answer 1

A CALayer to samolot, którego nie można złożyć. O ile nie napiszesz do niego filtra rdzenia, takiego jak efekt zwijania strony, ale jeśli jest to prywatny interfejs API, a nie opcja.

Musisz podzielić swój widok na dwa widoki i sfałszować zakładkę, przekształcając dwa jednocześnie: CALayer.

domyślnie warstwy przekształcenia nie mają perspektywy, więc musisz także ustawić to:

transform.m34 = 1.0/-2000; 

OK Bądźmy jeszcze wyraźniej: Split widok na dwie części i złóż je:

Twój widok hiarchii według zamieszczonego obrazu wygląda mniej więcej tak:

+ UIView  - Root view 
    + UIImageView - The persons face 
    + UILabel  - The label with title 
    + UILabel  - The label with company name 
    + UILabel  - The label with a short description. 
    + UILabel  - The label with e-mail 
    + UILabel  - The label with web address 
    + UILabel  - The label with phone number 

Przedstaw te dwa widoki rarchy w celu złożenia, tak:

+ UIView - Root view 
    + UIView  - Top half of the card 
     + UIImageView - The persons face 
     + UILabel  - The label with title 
     + UILabel  - The label with company name 
     + UILabel  - The label with a short description. 
    + UIView  - Bottom half of the view 
     + UILabel  - The label with e-mail 
     + UILabel  - The label with web address 
     + UILabel  - The label with phone number 

Nie za ciężko. Teraz animuj tylko dwa widoki używane do grupowania górnej i dolnej połowy.

Nie napiszę kodu dla ciebie, ale ważniejsza wskazówka, aby to ułatwić: Zmień punkty kontrolne widoku, aby animować! Nie chcesz obracać ich przez własne centra, zamiast tego przesuwaj środek obrotu, aby wyrównać względem krawędzi, które mają względem siebie.

topView.layer.anchorPoint = CGPointMake(0.5f, 1.0f); 
bottomView.layer.anchorPoint = CGPointMake(0.5f, 0.0f); 

Answer 2

Zrobiłem małe badania i natknąłem się na ten niesamowity projekt na Github: AFKPageFlipper. Jest całkiem ładny, wiedziałeś o tym? Jest to w zasadzie animacja Flipboard wykonana w całości za pomocą prostej i prostej animacji Core.

Spójrz na to, zadziwiająco łatwo postępuj zgodnie z kodem, a może to dać ci wskazówki, jak wdrożyć to, czego potrzebujesz.

Answer 3

Co o tym rodzaju workflow:

Get image z widoku

UIGraphicsBeginImageContext(self.bounds.size); 
[self.layer renderInContext:UIGraphicsGetCurrentContext()]; 
UIImage *viewImage = UIGraphicsGetImageFromCurrentImageContext(); 
UIGraphicsEndImageContext(); 

następnie utworzyć 2 zdjęcia (górny i dolny rect) używając

CGImageCreateWithImageInRect(CGImageRef, CGRect); 

Pozostawia z zasobami, które musisz zrobić, co chcesz. Dynamicznie tworzone zdjęcia z góry i z dołu, które można animować.