Animazione core iOS - Piegare un livello

Question

Utilizzando Core Animation, vorrei piegare un UIView (cioè è CALayer) al centro. Ad esempio, impostare il punto di ancoraggio come (0,5,0,5) & piega il livello. L'immagine che ho creato in Photoshop potrebbe dare l'effetto che sto cercando -

Quindi, quello che sta succedendo è, lo strato si è piegata sul suo centro, come la piega sta accadendo un po 'di prospettiva viene applicato (il famigerato m34!). Inizialmente, la vista è parallela al piano X-Y con l'asse Z rivolto direttamente all'utente. Mentre la piega sta accadendo, metà inferiore & metà superiore allo stesso tempo si sposta indietro (con una certa prospettiva, per dare profondità all'effetto 3D &) finché l'intero livello non è (parallelo) nel piano X-Z. Si noti che una volta che il livello è parallelo nel piano X-Z, l'utente non sarà più in grado di vedere il livello. Ma va bene, questo è l'effetto che sto cercando. A UIView scompare piegando al centro.

Come si fa a fare questo in iOS? Senza usare 2 strati diversi (per il fondo & per la parte superiore)? Ogni aiuto è molto apprezzato ...

Aggiornamento: Come @miamk sottolinea, questo è lo stesso effetto interfaccia utente utilizzata in "la nostra scelta" App o "Flipboard" App. Sto impazzendo per le ultime 8 ore su questo, finora infruttuoso. QUALSIASI idea è apprezzata. Grazie ...

AGGIORNAMENTO: Ho offerto una taglia su questo per ottenere risposte più specifiche. Mi piacerebbe vedere -

1. Esempi di codice.
2. Consigliare da persone che hanno fatto qualcosa di simile.
3. Anche il modo per ottenere questo in modo dettagliato (algo) è molto apprezzato.

Answer 1

A CALayer è un piano e non può essere piegato. A meno che non si scriva un filtro immagine di base per questo, come l'effetto di arricciatura della pagina, ma che se l'API privata e non un'opzione per voi.

È necessario dividere la vista in due viste e fingere la piega trasformando simultaneamente i due CALayer s.

di default un layer trasformare non hanno prospettiva, quindi è necessario anche impostare questo:

transform.m34 = 1.0/-2000; 

OK Cerchiamo di essere ancora più chiaro: dividere la visualizzazione in due e li piega:

tuo visualizzare hiarchy secondo l'immagine che hai postato sembra qualcosa di simile:

+ 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 

Quindi introdurre due nuove viste a questa vista hic rarchy ai fini della piegatura, in questo modo:

+ 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 

Non troppo difficile. Ora animare solo le due viste utilizzate per raggruppare la metà superiore e quella inferiore.

Non scriverò il codice per te, ma un altro suggerimento vitale per semplificare: modifica i punti di ancoraggio della vista da animare! Non si desidera ruotarli con i loro centri, invece spostare il centro di rotazione per allinearsi con i bordi che hanno l'uno contro l'altro.

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

Answer 2

Ha fatto una piccola ricerca e si è imbattuto in questo fantastico progetto su Github: AFKPageFlipper. È piuttosto recente, lo sapevi? Essenzialmente è l'animazione di Flipboard fatta completamente con l'animazione core semplice e semplice.

Date un'occhiata a questo, è sorprendentemente facile da seguire attraverso il codice, e potrebbe solo darvi qualche indicazione su come implementare ciò che vi serve.

Answer 3

Che dire di questo tipo di flusso di lavoro: Immagine Get

dal punto di vista

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

Quindi creare 2 immagini (superiore e rect basso) utilizzando

CGImageCreateWithImageInRect(CGImageRef, CGRect); 

Questo lascia tu con le risorse di cui hai bisogno per fare ciò che vuoi. Crea immagini dall'alto e dal basso create dinamicamente che possono essere animate.