Come animare il disegno di un CGPath?

Question

Mi chiedo se c'è un modo per farlo usando Core Animation. Nello specifico, sto aggiungendo un sottolivello a un NSView personalizzato supportato da layer e impostando il suo delegato su un altro NSView personalizzato. Metodo drawInRect di quella classe disegna un singolo CGPath:

- (void)drawInRect:(CGRect)rect inContext:(CGContextRef)context 
{ 
    CGContextSaveGState(context); 
    CGContextSetLineWidth(context, 12); 

    CGMutablePathRef path = CGPathCreateMutable(); 
    CGPathMoveToPoint(path, NULL, 0, 0); 
    CGPathAddLineToPoint(path, NULL, rect.size.width, rect.size.height); 

    CGContextBeginPath(context); 
    CGContextAddPath(context, path); 
    CGContextStrokePath(context); 
    CGContextRestoreGState(context); 
} 

mio effetto desiderato sarebbe quello di animare il disegno di questa linea. Cioè, mi piacerebbe che la linea "stirasse" effettivamente in modo animato. Sembra che ci sarebbe un modo semplice per farlo usando Core Animation, ma non sono stato in grado di trovarne uno.

Avete suggerimenti su come raggiungere questo obiettivo?

Answer 1

Sicuramente non disegnare la linea da soli. Aggiungi un sottolivello con altezza di 12 pixel con un colore di sfondo piatto, iniziando con una cornice a larghezza zero e animando la larghezza della vista. Se hai bisogno che le estremità siano arrotondate, imposta il livello cornerRadius a metà altezza.

Answer 2

Ho trovato questo esempio di percorsi animati e ho voluto condividerlo per chiunque altro cerchi come farlo con alcuni esempi di codice.

Utilizzerai strokeStart e strokeEnd di CAShapeLayer che richiede sdk 4.2, quindi se stai cercando di supportare SDK iOS precedenti, sfortunatamente questo non è ciò che desideri.

La cosa veramente bella di queste proprietà è che sono animabili. Animando strokeEnd da 0,0 a 1,0 per una durata di pochi secondi, si può facilmente visualizzare il percorso mentre viene disegnata:

CABasicAnimation *pathAnimation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"]; 
pathAnimation.duration = 10.0; 
pathAnimation.fromValue = [NSNumber numberWithFloat:0.0f]; 
pathAnimation.toValue = [NSNumber numberWithFloat:1.0f]; 
[self.pathLayer addAnimation:pathAnimation forKey:@"strokeEndAnimation"]; 

Infine, aggiungere un secondo strato contenente l'immagine di una penna e utilizzare un CAKeyframeAnimation animare lungo il percorso con la stessa velocità per rendere la perfetta illusione:

CAKeyframeAnimation *penAnimation = [CAKeyframeAnimation animationWithKeyPath:@"position"]; 
penAnimation.duration = 10.0; 
penAnimation.path = self.pathLayer.path; 
penAnimation.calculationMode = kCAAnimationPaced; 
[self.penLayer addAnimation:penAnimation forKey:@"penAnimation"]; 

Quale sorgente può essere visualizzato here e un video dimostrativo here. Leggi i creatori blog per ulteriori informazioni.