CALayer PacMan shape?

[sneaky]

I was watching a iTunesU video from WWDC2011 where they just very quickly had up on the screen a CALayer in the shape of a PacMan. They were animating opening and closing the "mouth" a few times and then quickly moved on.

I want to use this kind of shape for a timer, a full circle and as I'm counting down I reveal what is behind. I have been searching for a bit but I haven't figured out how it's done.

The only way I can think of is using a CAShapeLayer and UIBezierPaths but that seems overly complicated for this job. How would you go about doing it?

[sneaky]

I'm able to draw a PacMan shape now

- (void)drawRect:(CGRect)rect
{
	float from = 0.4;
	float to = 5.8;
	CGPoint center = self.center;
	CGContextRef ctx = UIGraphicsGetCurrentContext();
	CGContextSetFillColor(ctx, CGColorGetComponents( [[UIColor greenColor] CGColor]));
	CGContextMoveToPoint(ctx, center.x, center.y);     
	CGContextAddArc(ctx, center.x, center.y, 100, from, to, 0); 
	CGContextClosePath(ctx); 
	CGContextFillPath(ctx);
}

What I want to do next is animate the from and to of my arc. I haven't been able to do it. The methods I've seen to perform this task clears the context and then draws a brand new pacman with updated from and to values. It feels a bit hack-ish and I don't think that's the right way of doing it.

[Duncan C]

Originally Posted by sneaky

I'm able to draw a PacMan shape now

- (void)drawRect:(CGRect)rect
{
	float from = 0.4;
	float to = 5.8;
	CGPoint center = self.center;
	CGContextRef ctx = UIGraphicsGetCurrentContext();
	CGContextSetFillColor(ctx, CGColorGetComponents( [[UIColor greenColor] CGColor]));
	CGContextMoveToPoint(ctx, center.x, center.y);     
	CGContextAddArc(ctx, center.x, center.y, 100, from, to, 0); 
	CGContextClosePath(ctx); 
	CGContextFillPath(ctx);
}

What I want to do next is animate the from and to of my arc. I haven't been able to do it. The methods I've seen to perform this task clears the context and then draws a brand new pacman with updated from and to values. It feels a bit hack-ish and I don't think that's the right way of doing it.

I'd suggest using a CAShapeLayer. Set up the shape layer using a CGPath with an arc, much like the code you posted. You can then create a CABasicAnimation with a key of "path" and update the path with new from and to values. The shape layer knows how to animate changes in a path. I just learned about this last week, as it happens...

[sneaky]

Back to CAShaprLayer. Yes, I think you're right. The method of redrawing doesn't feel right. Will have to try your approach.

[sneaky]

Wow, I've found it really difficult to find good information on this topic. Maybe I'm looking in the wrong places. I have done the following now

- (void)viewDidLoad
{
    [super viewDidLoad];
	
	rootLayer = [CALayer layer];
	rootLayer.frame = self.view.bounds;
	[self.view.layer addSublayer:rootLayer];
	
	closedPath = CGPathCreateMutable();
	CGPoint center = self.view.center;
	CGPathMoveToPoint(closedPath, nil, center.x, center.y);
	CGPathAddArc(closedPath, NULL, center.x, center.y, 100, 0.1, 5.0, 0);
	CGPathCloseSubpath(closedPath);
	
	openPath = CGPathCreateMutable();
	CGPathMoveToPoint(openPath, nil, center.x, center.y);
	CGPathAddArc(openPath, NULL, center.x, center.y, 100, 3.0, 3.5, 0);
	CGPathCloseSubpath(openPath);
	
	shapeLayer = [CAShapeLayer layer];
	shapeLayer.path = closedPath;
	UIColor *fillColor = [UIColor greenColor];
	shapeLayer.fillColor = fillColor.CGColor;
	shapeLayer.fillRule = kCAFillRuleNonZero;
	[rootLayer addSublayer:shapeLayer];
	[self performSelector:@selector(startAnimation) withObject:nil afterDelay:1.0];
}

-(void)startAnimation {	
	CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"path"];
	animation.duration = 2.0;
	animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
	animation.repeatCount = HUGE_VALF;
	animation.autoreverses = YES;
	animation.fromValue = (id)closedPath;
	animation.toValue = (id)openPath;
	[shapeLayer addAnimation:animation forKey:@"myAnimation"];
}

This code will transfrom the entire shape from a pacman to a pie piece. This is not what I'm after and I have been desperately been searching for how to access the right values. going for animationWithKeyPath:@"path" is probably right but the fromValue and toValue values I specify the entire shape and not just the startAngle and endAngle of the CGPathAddArc.

[pacphone]

If you need an example of pacman to follow you can view the game I provided.
It is written in flash but it has the correct map from the original game.
Hope it helps.