¿Por qué esta transformación usando CATransform3D reduce el ancho de la vista?

Question

Tome un vistazo a la siguiente progresión de imágenes:

lo que está sucediendo aquí es la primera que he seleccionado "béisbol", haciendo que los 3 puntos de vista grises que se ven a rotar a la izquierda de manera que el que tiene los distintos niveles están en el medio (segunda imagen). Puedes ver que ya en este punto el ancho de la vista se ha reducido sustancialmente. La tercera imagen se produce después de hacer clic en la vista que contiene los nombres de deportes, lo que hace que gire de nuevo al centro.

De lo que puedo decir, la anchura de miras se reduce cuando se gira hacia el centro. Pero no tengo idea de por qué.

Aquí está el código relevante. pos se refiere a dónde se va a ubicar el view en cuestión. 0 indica que está en el medio, 1 indica que es una a la derecha de la media, -1 es uno a la izquierda del centro, etc.

- (void)perspectiveView:(MenuSection *)view forPosition:(NSInteger)pos 
{ 

    CALayer *layer = view.layer; 
    CATransform3D transform = CATransform3DIdentity; 

    MenuSection *prevView = (pos >= 0) ? (MenuSection *)[self viewWithTag:view.tag - 1] : (MenuSection *)[self viewWithTag:view.tag + 1]; 

    if (pos == 0) { 
     view.changingToFrame = CGRectMake(round((480 - view.frame.size.width)/2), view.frame.origin.y, view.frame.size.width, view.frame.size.height); 
     view.frame = view.changingToFrame; 

    } else { 

     if (pos == 1) { 
      NSLog(@"%@",NSStringFromCGRect(prevView.changingToFrame)); 
      view.changingToFrame = CGRectMake(round(prevView.changingToFrame.origin.x + prevView.frame.size.width + 20), view.frame.origin.y, view.frame.size.width, view.frame.size.height); 
      transform.m34 = 1.0/1000; 
     } else if (pos == -1){ 
      view.changingToFrame = CGRectMake(round(prevView.changingToFrame.origin.x - view.frame.size.width - 20), view.frame.origin.y, view.frame.size.width, view.frame.size.height); 
      transform.m34 = 1.0/-1000; 
     } else if (pos == 2){ 
      view.changingToFrame = CGRectMake(round(prevView.changingToFrame.origin.x + prevView.frame.size.width + 20), view.frame.origin.y, view.frame.size.width, view.frame.size.height); 
      transform.m34 = 1.0/500; 
     } else if (pos == -2){ 
      view.changingToFrame = CGRectMake(round(prevView.changingToFrame.origin.x - view.frame.size.width - 20), view.frame.origin.y, view.frame.size.width, view.frame.size.height); 
      transform.m34 = 1.0/-500; 
     } 

     view.frame = view.changingToFrame; 

     transform = CATransform3DRotate(transform, 45.0f * M_PI/180.0f, 0.0f, 1.0f, 0.0f); 
    } 

    layer.transform = transform; 
} 

Answer 1

Lo he resuelto. Resulta que aplicar CATransform3D en realidad cambia el marco de la vista. En el código que publiqué, cuando configuro el nuevo marco de la vista (porque gira a una posición diferente), simplemente uso view.frame.size.width en CGRectMake() en un intento por mantener el ancho. PERO, dado que el CATransform3D había modificado previamente el ancho, no obtengo el ancho real que quiero.

la solución era subclase el necesario UIViews y almacenar su trama original en una Ivar. De esa forma, siempre puedo usar eso como punto de referencia cuando muevo las vistas a diferentes posiciones.

Answer 2

No debería ser necesario para editar las matrices CATransform3D directamente (m34, etc.) para que este efecto funcione. Pruebe esto:

if (pos == 0) { 
    view.changingToFrame = CGRectMake(round((480 - view.frame.size.width)/2), view.frame.origin.y, view.frame.size.width, view.frame.size.height); 
    view.frame = view.changingToFrame; 
} else { 
    if (pos == 1) { 
     view.changingToFrame = CGRectMake(round(prevView.changingToFrame.origin.x + prevView.frame.size.width + 20), view.frame.origin.y, view.frame.size.width, view.frame.size.height); 
     transform = CATransform3DRotate(transform, M_PI/4.0f, 0.0f, 1.0f, 0.0f); 
    } else if (pos == -1){ 
     view.changingToFrame = CGRectMake(round(prevView.changingToFrame.origin.x - view.frame.size.width - 20), view.frame.origin.y, view.frame.size.width, view.frame.size.height); 
     transform = CATransform3DRotate(transform, -M_PI/4.0f, 0.0f, 1.0f, 0.0f); 
    } else if (pos == 2){ 
     view.changingToFrame = CGRectMake(round(prevView.changingToFrame.origin.x + prevView.frame.size.width + 20), view.frame.origin.y, view.frame.size.width, view.frame.size.height); 
     transform = CATransform3DRotate(transform, M_PI/3.0f, 0.0f, 1.0f, 0.0f); 
    } else if (pos == -2){ 
     view.changingToFrame = CGRectMake(round(prevView.changingToFrame.origin.x - view.frame.size.width - 20), view.frame.origin.y, view.frame.size.width, view.frame.size.height); 
     transform = CATransform3DRotate(transform, -M_PI/3.0f, 0.0f, 1.0f, 0.0f); 
    } 
    view.frame = view.changingToFrame; 
} 
layer.transform = transform; 

y juegue con esos ángulos hasta que se vea bien.