it shows an oval during animation but not a circle(iOS)

Question

I want to use CABasicAnimation to draw a circle, but strangely it shows an oval during animation the code is as following:

 //---------------draw circle
// Set up the shape of the circle
int radius = 10;
CAShapeLayer *circle = [CAShapeLayer layer];
// Make a circular shape
circle.path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(self.view.frame.size.width/2 ,self.view.frame.size.height/2) radius:radius startAngle:0 endAngle:M_PI*2 clockwise:NO].CGPath;
// Configure the apperence of the circle
circle.fillColor = [UIColor redColor].CGColor;
circle.strokeColor = [UIColor redColor].CGColor;
circle.lineWidth = 1;
// Add to parent layer
[self.view.layer addSublayer:circle];
// Configure animation
CABasicAnimation *pathAnimation = [CABasicAnimation animationWithKeyPath:@"path"];
[pathAnimation setFromValue:(id)[UIBezierPath bezierPathWithArcCenter:CGPointMake(self.view.frame.size.width/2 ,self.view.frame.size.height/2) radius:0 startAngle:0 endAngle:M_PI*2 clockwise:NO].CGPath];
[pathAnimation setToValue:(id)[UIBezierPath bezierPathWithArcCenter:CGPointMake(self.view.frame.size.width/2 ,self.view.frame.size.height/2) radius:radius*1.2 startAngle:0 endAngle:M_PI*2 clockwise:NO].CGPath];
[pathAnimation setDuration:15.0f];
[pathAnimation setRepeatCount:1.0f];
[pathAnimation setTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear]];
circle.path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(self.view.frame.size.width/2,self.view.frame.size.height/2) radius:radius startAngle:0 endAngle:M_PI*2 clockwise:NO].CGPath;
[circle addAnimation:pathAnimation forKey:@"changePathAnimation"]; 

How can I deal with it.

Answer 1

Try like that,

CABasicAnimation *pathAnimation = [CABasicAnimation animationWithKeyPath:@"path"];
[pathAnimation setFromValue:(id)[UIBezierPath bezierPathWithArcCenter:CGPointMake(self.view.frame.size.width/2 ,self.view.frame.size.height/2) radius:10 startAngle:0 endAngle:M_PI*2 clockwise:NO].CGPath];
[pathAnimation setToValue:(id)[UIBezierPath bezierPathWithArcCenter:CGPointMake(self.view.frame.size.width/2 ,self.view.frame.size.height/2) radius:radius*1.2 startAngle:0 endAngle:M_PI*2 clockwise:NO].CGPath];
[pathAnimation setDuration:15.0f];
[pathAnimation setRepeatCount:1.0f];
[pathAnimation setTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear]];
circle.path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(self.view.frame.size.width/2,self.view.frame.size.height/2) radius:radius startAngle:0 endAngle:M_PI*2 clockwise:NO].CGPath;
[circle addAnimation:pathAnimation forKey:@"changePathAnimation"];