iOS Core Animation - Fold a Layer

Question

Usando Core Animation, me gustaría doblar un UIView (es decir, es CALayer) en su centro. es decir, establecería el punto de anclaje como (0.5,0.5) & veces la capa. Esta imagen que he creado en Photoshop puede dar el efecto Busco -

Por lo tanto, lo que está sucediendo es, la capa se pliega en su centro, como la tapa está pasando un poco de perspectiva se aplica (el infame m34!). Inicialmente, la vista es paralela en el plano X-Y con el eje Z mirando directamente al usuario. Como la tapa está sucediendo, parte inferior media & mitad superior al mismo tiempo se mueve hacia atrás (con un poco de perspectiva, para dar profundidad & efecto 3D) hasta que toda la capa es de (paralelo) en X-Z avión. Tenga en cuenta que una vez que la capa es paralela en el plano X-Z, el usuario ya no podrá ver la capa. Pero está bien, ese es el efecto que estoy buscando. A UIView desaparece al doblar en su centro.

¿Cómo se puede hacer esto en iOS? Sin usar 2 capas diferentes (para la parte inferior & para arriba)? Cualquier ayuda es muy apreciada ...

Actualización: Como @miamk señala, este es el mismo efecto que la interfaz de usuario utilizado en "en nuestras manos" aplicación o "Flipboard" aplicación. Me estoy sacudiendo los sesos durante las últimas 8 horas en esto, hasta ahora infructuoso. CUALQUIER idea es apreciada. Gracias ...

ACTUALIZACIÓN: He ofrecido recompensas en esto para obtener respuestas más específicas. Me encantaría ver -

1. Muestras de código.
2. Aconsejar a personas que han hecho algo como esto.
3. Incluso la forma de lograr esto de una manera detallada (algo) es muy apreciada.

Answer 1

A CALayer es un avión, y no se puede plegar. A menos que escriba un filtro de imagen central para él, como el efecto de curvatura de la página, pero eso si es una API privada y no una opción para usted.

Tiene que dividir su vista en dos vistas, y falsificar el doblez al transformar las dos CALayer s simultáneamente.

por defecto un capas de transformar no tienen perspectiva, por lo que debe también configurar esto:

transform.m34 = 1.0/-2000; 

OK Vamos a ser aún más claro: Dividir la vista en dos y doblarlas:

Su ver hiarchy de acuerdo a la imagen que envió ve algo como esto:

+ 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 

Así introducir dos nuevos puntos de vista a este punto de vista hie rarchy con el propósito de plegado, como esto:

+ 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 

No

demasiado duro. Ahora anima solo las dos vistas usadas para agrupar la mitad superior y la inferior.

No escribiré el código para usted, pero un consejo más importante para hacerlo más fácil: ¡Cambie los puntos de anclaje de la vista para animar! No desea rotarlos por sus propios centros, en lugar de eso, mueva el centro de rotación para alinearlos con los bordes que tienen uno contra el otro.

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

Answer 2

Hice un poco de investigación y tropecé con este proyecto increíble en Github: AFKPageFlipper. Es bastante reciente, ¿lo sabías? Es esencialmente animación de Flipboard hecha completamente con simple y simple animación de núcleo.

Échele un vistazo, es sorprendentemente fácil seguir el código, y podría proporcionarle algunas instrucciones sobre cómo implementar lo que necesita.

Answer 3

¿Qué pasa con este tipo de flujo de trabajo: Obtén

desde el punto de vista

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

A continuación, cree 2 imágenes (superior e rect inferior) usando

CGImageCreateWithImageInRect(CGImageRef, CGRect); 

Este hojas con los activos que necesita para hacer lo que quiere. Imágenes superiores e inferiores creadas dinámicamente que se pueden animar.