How to animate CAShapeLayer path and fillColor

iphone ios core-animation cgpath cashapelayer
MAMN84 picture MAMN84 · Mar 27, 2013 · Viewed 19.5k times · Source

How to animate CAShapeLayer path and fillColor?

How to animate strokeEnd to show the path being drawn? and how to animate fillColor?

Answer

MAMN84 picture MAMN84 · Mar 27, 2013

To animate path

  //setup the CAShapeLayer
myShapeLayer.strokeColor = [[UIColor blueColor] CGColor];
myShapeLayer.lineWidth = 5;
myShapeLayer.fillColor = [[UIColor yellowColor] CGColor];



//Display it!
[self.view.layer addSublayer:myShapeLayer];

//Animate path
CABasicAnimation *pathAnimation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
pathAnimation.duration = 1.5f;
pathAnimation.fromValue = [NSNumber numberWithFloat:0.0f];
pathAnimation.toValue = [NSNumber numberWithFloat:1.0f];
pathAnimation.repeatCount = 10;
pathAnimation.autoreverses = YES;
[myShapeLayer addAnimation:pathAnimation forKey:@"strokeEnd"];

//Animate colorFill
CABasicAnimation *fillColorAnimation = [CABasicAnimation animationWithKeyPath:@"fillColor"];
fillColorAnimation.duration = 1.5f;
fillColorAnimation.fromValue = (id)[[UIColor clearColor] CGColor];
fillColorAnimation.toValue = (id)[[UIColor yellowColor] CGColor];
fillColorAnimation.repeatCount = 10;
fillColorAnimation.autoreverses = YES;
[myShapeLayer addAnimation:fillColorAnimation forKey:@"fillColor"];

I hope this helps :)

Related questions

iPhone UIView Animation Best Practice

What is considered best practice for animating view transitions on the iPhone? For example, the ViewTransitions sample project from apple uses code like: CATransition *applicationLoadViewIn = [CATransition animation]; [applicationLoadViewIn setDuration:1]; [applicationLoadViewIn setType:kCATransitionReveal]; [applicationLoadViewIn setTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn]]; [[myview layer] addAnimation:…

Read More
Disabling implicit animations in -[CALayer setNeedsDisplayInRect:]

I've got a layer with some complex drawing code in its -drawInContext: method. I'm trying to minimize the amount of drawing I need to do, so I'm using -setNeedsDisplayInRect: to update just the changed parts. This is working splendidly. However, …

Read More
How to animate the background color of a UILabel?

This looks like it should work, but doesn't. The color turns green at once. self.labelCorrection.backgroundColor = [UIColor whiteColor]; [UIView animateWithDuration:2.0 animations:^{ self.labelCorrection.backgroundColor = [UIColor greenColor]; }];

Read More