Animating CAShapeLayer's strokeColor with CABasicAnimation

Question

I've been unsuccessful at animating a flashing stroke on a CAShapeLayer using the answer from this previous thread, and after many searches I can find no other examples of animating the stroke using CABasicAnimation.

What I want to do is have the stroke of my CAShapeLayer pulse between two colors. Using CABasicAnimation for opacity works fine, but the [CABasicAnimation animationWithKeyPath:@"strokeColor"] eludes me, and I'd appreciate any advice on how to successfully implement.

    CABasicAnimation *strokeAnim = [CABasicAnimation animationWithKeyPath:@"strokeColor"];
    strokeAnim.fromValue         = (id) [UIColor blackColor].CGColor;
    strokeAnim.toValue           = (id) [UIColor purpleColor].CGColor;
    strokeAnim.duration          = 1.0;
    strokeAnim.repeatCount       = 0.0;
    strokeAnim.autoreverses      = NO;
    [shapeLayer addAnimation:strokeAnim forKey:@"animateStrokeColor"];

//    CABasicAnimation *opacityAnimation = [CABasicAnimation animationWithKeyPath:@"opacity"];
//    opacityAnimation.fromValue         = [NSNumber numberWithFloat:0.0];
//    opacityAnimation.toValue           = [NSNumber numberWithFloat:1.0];
//    opacityAnimation.duration          = 1.0;
//    opacityAnimation.repeatCount       = 0.0;
//    opacityAnimation.autoreverses      = NO;
//    [shapeLayer addAnimation:opacityAnimation forKey:@"animateOpacity"];

Uncommenting the opacity animation results in an expected opacity fade. The stroke animation produces no effect. An implicit strokeColor change animates as expected, but I would like documented confirmation that strokeColor can be explicitly animated using CABasicAnimation.

Update: The specific problem was that shapeLayer.path was NULL. Correcting that fixed the problem.

Eludes you... how? What have you tried? How is it not working? What happens instead? — Sixten Otto, Aug 25 '12 at 14:30

score 7 · Accepted Answer · answered Aug 25 '12 at 15:18

The code below works great for me. What is the lineWidth of your shapeLayer stroke path? Could that be the issue?

- (void)viewDidLoad
{
    [super viewDidLoad];

    UIBezierPath * circle = [UIBezierPath bezierPathWithOvalInRect:self.view.bounds];

    CAShapeLayer * shapeLayer = [CAShapeLayer layer];
    shapeLayer.path = circle.CGPath;
    shapeLayer.strokeColor =[UIColor blueColor].CGColor;
    [shapeLayer setLineWidth:15.0];

    [self.view.layer addSublayer:shapeLayer];

    CABasicAnimation *strokeAnim = [CABasicAnimation animationWithKeyPath:@"strokeColor"];
    strokeAnim.fromValue         = (id) [UIColor redColor].CGColor;
    strokeAnim.toValue           = (id) [UIColor greenColor].CGColor;
    strokeAnim.duration          = 3.0;
    strokeAnim.repeatCount       = 0;
    strokeAnim.autoreverses      = YES;
    [shapeLayer addAnimation:strokeAnim forKey:@"animateStrokeColor"];

}

Let me know if it works for you...

Thank you, that confirms that strokeColor can be animated with CABasicAnimation. My problem must lie elsewhere (I suspect either in the previous rendering of the path or in the subsequent rendering in drawLayer: inContext). I will update for future reference when I discover the exact cause. — Michael Mangold, Aug 25 '12 at 16:56
Do update the thread with your findings! I would love to know what was the issue. — clearwater82, Aug 25 '12 at 17:22

Animating CAShapeLayer's strokeColor with CABasicAnimation

1 Answers1