iPhone core animation - animate a NSBezierPath

Question

I want to animate the drawing of a path as it is being drawn on the screen I am assuming Core Animation is the best way with a NSBezierPath however I am not sure on how to implement this.

Basically the idea is to have a path from point A to point B slowly being animated from A to B until the path reaches B. A good tutorial on how to do this would be great.

Answer 1

You can create CAShapeLayer with your CGPath (can be created from UIBezierPath for example).

Then path property of CAShapeLayer is animatable itself and you can also create more advanced animations using animatable strokeStart and strokeEnd properties (available starting iOS 4.2)

Simple example of how to add layer with random line that appears with animation:

CAShapeLayer *l = [CAShapeLayer layer];
l.frame = self.view.bounds;
l.strokeColor = [UIColor redColor].CGColor;
CGPoint start = CGPointMake(arc4random()%300+10, arc4random()%400+40);
CGPoint end = CGPointMake(arc4random()%300+10, arc4random()%400+40);
UIBezierPath *path = [[UIBezierPath alloc] init];
[path moveToPoint:start];
[path addLineToPoint:end];
l.path = path.CGPath;
[path release];

CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
animation.fromValue = [NSNumber numberWithFloat:0.0f];
animation.toValue = [NSNumber numberWithFloat:1.0f];
animation.duration = 3.0f;
[l addAnimation:animation forKey:@"myStroke"];
[self.view.layer addSublayer:l];