Viste di curvatura/orditura con CoreAnimation o OpenGL per effetto carosello

Question

In questo momento sto compilando un UIScrollView con una serie di viste. Le viste devono essere deformate per far apparire UIScrollView come una giostra. In altre parole, quando l'utente scorre, deve essere come un cerchio. Non ho mai fatto nulla del genere prima d'ora, ma presumo che CoreAnimation sia fuori discussione e che OpenGL debba essere usato. Se questo è possibile con CoreAnimation o Quartz, allora ho davvero bisogno di un campione su come deformare le viste e posso capire il resto, ma non ho familiarità con OpenGL.

Answer 1

Nella mia esperienza, è un po 'difficile da ottenere i valori a destra. Il modo di dare una prospettiva è manipolando la sua trasformazione di livello. Ho usato il seguente metodo per ottenere la trasfor per un effetto simile:

-(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; 
} 

Ciò è stato fatto per creare un'animazione "page flip", quindi potrebbe essere necessario per adattarsi. Per utilizzarlo, fai quanto segue:

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

dove flip_page è un UIView. Saluti!

Answer 2

Se si desidera deformare le viste, è necessario o OpenGL oppure è possibile utilizzare CAShapLayer di Core Animation che consente di specificare un percorso di Bézier che può avere questa curva in esso. Ma tieni presente che questa curva che stai vedendo è probabilmente solo un'illusione ottica (anche se nella tua immagine sopra sembra una curva reale). Se ottieni un numero sufficiente di rettangoli con la corretta rotazione dell'asse y in una riga, penso che tu possa ottenere l'effetto che stai cercando con Core Animation. Sono abbastanza sicuro che questo è il modo in cui le cose sono implementate nelle demo di Animazione di base fornite da Apple un paio di anni fa. Ecco uno screenshot dal video da quella di presentazione:

ho pasticciato con la trasformazione dello strato di vista un po 'e arrivato fino a questo:

- (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)]; 
} 

ho buttato insieme a demo project che mostra come il la rotazione funziona in risposta a un cursore. Non usa una vista di scorrimento quindi dovresti adattarla, ma penso che tu possa tenere traccia dello spostamento di scorrimento corrente e applicare la trasformazione di conseguenza. Non sono sicuro che sarà d'aiuto, ma è così.