Cómo animar el dibujo de un CGPath?

Question

Me pregunto si hay una manera de hacer esto usando Core Animation. Específicamente, agrego una subcapa a una NSView personalizada con respaldo de capa y establezco su delegado a otra NSView personalizada. drawInRect método de esa clase dibuja una sola 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); 
} 

Mi efecto deseado sería para animar el trazado de esta línea. Es decir, me gustaría que la línea se "estire" de forma animada. Parece que habría una manera simple de hacer esto usando Core Animation, pero no he podido encontrar ninguno.

¿Tiene alguna sugerencia sobre cómo podría lograr este objetivo?

Answer 1

Por supuesto, no dibuje la línea usted mismo. Agregue una subcapa de 12 píxeles de altura con un color de fondo plano, comenzando con un marco de ancho cero y animando al ancho de su vista. Si necesita redondear los extremos, establezca cornerRadius de la capa a la mitad de su altura.

Answer 2

Encontré este ejemplo de rutas animadas y quería compartirlo con otras personas que busquen cómo hacerlo con algunos ejemplos de código.

Utilizarás strokeStart y strokeEnd de CAShapeLayer que requieren sdk 4.2, por lo que si estás buscando admitir SDK iOS más antiguos, desafortunadamente esto no es lo que quieres.

Lo bueno de estas propiedades es que son animables. Al animar strokeEnd de 0,0 a 1,0 en una duración de unos pocos segundos, podemos mostrar fácilmente el camino, ya que se está elaborando:

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"]; 

Por último, añadir una segunda capa que contiene la imagen de una pluma y utilizar un CAKeyframeAnimation para animar a lo largo del camino con la misma velocidad para hacer la ilusión perfecta:

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

el que la fuente se puede ver here y un video de demostración here. Lee los creadores blog para obtener más información.