I want to draw a Smooth animations in iOS using CAPropertyAnimations

Question

it works like this

I want to show a circle animation. it become bigger gradually. I don't want to change it's position.

my code is as following, and the circle's position also moves, how can deal with this.

- (void)viewDidLoad
{
[super viewDidLoad];
int radius = 20;
CGPoint drawPoint = CGPointMake(self.view.frame.size.width/2 -radius,self.view.frame.size.height/2+radius*2);
CAShapeLayer *circle = [CAShapeLayer layer];
// Make a circular shape
circle.path = [UIBezierPath bezierPathWithArcCenter:drawPoint radius:radius startAngle:0 endAngle:M_PI*2 clockwise:NO].CGPath;
// Configure the apperence of the circle
UIColor *pointColor =[UIColor alloc];
pointColor = [UIColor redColor];
circle.fillColor = pointColor.CGColor;
circle.strokeColor = pointColor.CGColor;
circle.lineWidth = 1;
// Add to parent layer
[self.view.layer addSublayer:circle];
// Configure animation
CABasicAnimation *pathAnimation = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
// Set the initial and the final values
[pathAnimation setFromValue:[NSNumber numberWithFloat:0.5f]];
[pathAnimation setToValue:[NSNumber numberWithFloat:1.5f]];
[pathAnimation setDuration:1.0f];
[pathAnimation setRepeatCount:1.0f];
[pathAnimation setTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut]];
[circle addAnimation:pathAnimation forKey:@"changePathAnimation"];    //--draw circle

}

Answer 1

Your animation is relative to the registration point of your CAShapeLayer, which is (0, 0) in screen coordinates.

Try this:

circle.path = [UIBezierPath bezierPathWithArcCenter:CGPointZero radius:radius startAngle:0 endAngle:M_PI*2 clockwise:NO].CGPath;
circle.position = drawPoint;