title: Animated CAShapeLayer Pie
body: <p>I am trying to create a simple and animated pie chart using <code>CAShapeLayer</code>. I want it to animate from 0 to a provided percentage.</p>
  
  <p>To create the shape layer I use:</p>
  
  <pre><code>CGMutablePathRef piePath = CGPathCreateMutable();
  CGPathMoveToPoint(piePath, NULL, self.frame.size.width/2, self.frame.size.height/2);
  CGPathAddLineToPoint(piePath, NULL, self.frame.size.width/2, 0);
  CGPathAddArc(piePath, NULL, self.frame.size.width/2, self.frame.size.height/2, radius, DEGREES_TO_RADIANS(-90), DEGREES_TO_RADIANS(-90), 0);        
  CGPathAddLineToPoint(piePath, NULL, self.frame.size.width/2 + radius * cos(DEGREES_TO_RADIANS(-90)), self.frame.size.height/2 + radius * sin(DEGREES_TO_RADIANS(-90)));
  
  pie = [CAShapeLayer layer];
  pie.fillColor = [UIColor redColor].CGColor;
  pie.path = piePath;
  
  [self.layer addSublayer:pie];
  </code></pre>
  
  <p>Then to animate I use:</p>
  
  <pre><code>CGMutablePathRef newPiePath = CGPathCreateMutable();
  CGPathAddLineToPoint(newPiePath, NULL, self.frame.size.width/2, 0);    
  CGPathMoveToPoint(newPiePath, NULL, self.frame.size.width/2, self.frame.size.height/2);
  CGPathAddArc(newPiePath, NULL, self.frame.size.width/2, self.frame.size.height/2, radius, DEGREES_TO_RADIANS(-90), DEGREES_TO_RADIANS(125), 0);                
  CGPathAddLineToPoint(newPiePath, NULL, self.frame.size.width/2 + radius * cos(DEGREES_TO_RADIANS(125)), self.frame.size.height/2 + radius * sin(DEGREES_TO_RADIANS(125)));    
  
  CABasicAnimation *pieAnimation = [CABasicAnimation animationWithKeyPath:@"path"];
  pieAnimation.duration = 1.0;
  pieAnimation.removedOnCompletion = NO;
  pieAnimation.fillMode = kCAFillModeForwards;
  pieAnimation.fromValue = pie.path;
  pieAnimation.toValue = newPiePath;
  
  [pie addAnimation:pieAnimation forKey:@"animatePath"];
  </code></pre>
  
  <p>Obviously, this is animating in a really odd way. The shape just kind of grows into its final state. Is there an easy way to make this animation follow the direction of the circle? Or is that a limitation of <code>CAShapeLayer</code> animations?</p>