Curvar/deformar vistas con CoreAnimation u OpenGL para efecto de carrusel

Question

Ahora estoy rellenando un UIScrollView con una serie de vistas. Las vistas deben estar deformadas para que el UIScrollView parezca un carrusel. En otras palabras, cuando el usuario se desplaza, debe ser como un círculo. Nunca he hecho algo como esto antes, pero asumo que CoreAnimation está fuera de cuestión y OpenGL necesita ser utilizado. Si esto es posible con CoreAnimation o Quartz, realmente solo necesito una muestra sobre cómo deformar las vistas y puedo descifrar el resto, pero no estoy familiarizado con OpenGL.

Answer 1

En mi experiencia, es un poco difícil de obtener los valores de la derecha. La forma de dar una perspectiva de vista es manipulando su transformación de capa. He utilizado el siguiente método para lograr la transfor para un efecto similar:

-(CATransform3D)makeTransformForAngle:(CGFloat)angle from:(CATransform3D)start{ 

    CATransform3D transform = start; 


    // the following two lines are the key to achieve the perspective effect 
CATransform3D persp = CATransform3DIdentity; 
    persp.m34 = 1.0/-1000; 

    transform = CATransform3DConcat(transform, persp); 
     transform = CATransform3DRotate(transform,angle, 0.0, 1.0, 0.0); 
    return transform; 
} 

Esto se hizo para crear un "tirón de la página" de animación, por lo que puede que tenga que adaptarse. Para usarlo, haga lo siguiente:

flip_page.layer.transform = [self makeTransformForAngle:angle from:CATransform3DIdentity]; 

donde flip_page es un UIView. ¡Aclamaciones!

Answer 2

Si desea deformar las vistas, necesitará OpenGL o podría utilizar CAShapLayer de Core Animation que le permite especificar una ruta bezier que puede tener esta curva. Pero tenga en cuenta que esta curva que está viendo probablemente sea solo una ilusión óptica (aunque en su imagen de arriba se ve como una curva real). Si obtienes suficientes rectángulos con la rotación correcta del eje y en una fila, creo que puedes encontrar el efecto que estás buscando con Core Animation. Estoy bastante seguro de que así es como se implementan las cosas en las demostraciones de Core Animation que Apple proporcionó hace un par de años. Aquí hay una captura de pantalla del vídeo de esa presentación:

ensucié alrededor con la transformación de la capa de una visión un poco y se le ocurrió esto:

- (IBAction)sliderDidChange:(id)sender 
{ 
    CGFloat value = [(UISlider*)sender value]; 
    CGFloat xOff = value - 0.5; 

    CATransform3D trans = CATransform3DIdentity; 
    trans.m34 = 1.0f/-1000.0f; 

    trans = CATransform3DRotate(trans, degreesToRadians(xOff * -25.0f), 0.0f, 1.0f, 0.0f); 
    trans = CATransform3DTranslate(trans, 0.0f, 0.0f, 900.0f * fabs(xOff)); 
    [[frameView layer] setTransform:trans]; 

    CGPoint center= [frameView center]; 
    [frameView setCenter:CGPointMake(1024.0 * value, center.y)]; 
} 

me tiró juntos a demo project que muestra cómo el la rotación funciona en respuesta a un control deslizante. No utiliza una vista de desplazamiento, por lo que tendría que adaptarla, pero creo que puede seguir el desplazamiento de desplazamiento actual y aplicar la transformación en consecuencia. No estoy seguro de si ayudará, pero ahí está.