Animate dibujando el relleno de un CAShapeLayer

Question

He estado jugando con dibujar un camino usando un CAShapeLayer como se describe en este gran artículo, http://oleb.net/blog/2010/12/animating-drawing-of-cgpath-with-cashapelayer, pero me pregunto si hay una manera de animar el llenado de una capa.

Por ejemplo, tengo un texto que quiero dibujar en la pantalla, pero solo he podido dibujar el trazo del texto y no el relleno. Otro ejemplo, tengo una forma de estrella que me gustaría animar para rellenarlo.

¿Es esto posible usando un CAShapeLayer u otro objeto?

Gracias!

Answer 1

Sí, es posible.

CAShapeLayers tiene una propiedad fillColor que es animable.

Funciona de la misma manera que cambiar el strokeEnd/strokeStart como lo ha hecho con su animación.

Answer 2

La mayor parte del tiempo es el mismo código, solo tiene que establecer diferentes valores para fromValue y toValue de su CABasicAnimation. He creado una categoría que me devuelve un CABasicAnimation:

Animación para StrokeEnd

+ (CABasicAnimation *)animStrokeEndWithDuration:(CGFloat)dur 
             delegate:(id)target{ 
    CABasicAnimation *animLine = 
    [CABasicAnimation animationWithKeyPath:@"strokeEnd"]; 
    [animLine setDuration:dur]; 
    [animLine setFromValue:[NSNumber numberWithFloat:0.0f]]; 
    [animLine setToValue:[NSNumber numberWithFloat:1.0f]]; 
    [animLine setRemovedOnCompletion:NO]; 
    [animLine setFillMode:kCAFillModeBoth]; 
    [animLine setDelegate:target]; 
    [animLine setTimingFunction: 
    [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut]]; 

    return animLine; 
} 

Animación para fillColor

+ (CABasicAnimation *)animFillColorWithDur:(CGFloat)dur 
            startCol:(UIColor *)start 
            endColor:(UIColor *)end 
            delegate:(id)target{ 

    CABasicAnimation *animFill = 
    [CABasicAnimation animationWithKeyPath:@"fillColor"]; 
    [animFill setDuration:dur]; 
    [animFill setFromValue:(id)start.CGColor]; 
    [animFill setToValue:(id)end.CGColor]; 
    [animFill setRemovedOnCompletion:NO]; 
    [animFill setDelegate:target]; 
    [animFill setFillMode:kCAFillModeBoth]; 

    return animFill; 
} 

La regresado CABasicAnimation sólo tiene que ser añadido a un CAShapeLayer:

[_myShapeLayer addAnimation:returnedAnimation forKey:@"animKey"]