CABasicAnimation - transform scale keep in center

You can create a scale around the center of the object instead of (0, 0) like this:

CABasicAnimation *scale = [CABasicAnimation animationWithKeyPath:@"transform"];CATransform3D tr = CATransform3DIdentity;tr = CATransform3DTranslate(tr, self.bounds.size.width/2, self.bounds.size.height/2, 0);tr = CATransform3DScale(tr, 3, 3, 1);tr = CATransform3DTranslate(tr, -self.bounds.size.width/2, -self.bounds.size.height/2, 0);scale.toValue = [NSValue valueWithCATransform3D:tr];

So we start out with the "identity" transform (which means 'no transform'). Then we translate (move) to the center of the object. Then we scale. Then we move back to origo so we're back where we started (we only wanted to affect the scale operation).

I seem to have fixed this with a second animation on the position key. Is this correct or is there a better way of doing this?

CABasicAnimation *animation2 = [CABasicAnimation animationWithKeyPath:@"position"];animation2.duration = 1.0f;animation2.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];animation2.fromValue = [NSValue valueWithCGPoint:CGPointMake((self.view.frame.size.width/2), (self.view.frame.size.height/2))];animation2.toValue = [NSValue valueWithCGPoint:CGPointMake((self.view.frame.size.width/2), (self.view.frame.size.height/2))];[toBeMask.layer.mask addAnimation:animation2 forKey:@"animateMask2"];

I am not sure why, but CAShapeLayer does not set the bounds property to the layer. In my case, that's was the problem.Try setting the bounds. That should work.

I did something like this for building the initial circle

self.circle = [CAShapeLayer layer];CGRect roundedRect = CGRectMake(0, 0, width, width);self.circle.bounds = roundedRect;UIBezierPath *start = [UIBezierPath bezierPathWithRoundedRect:roundedRect cornerRadius:width/2];[self.circle setPath:start.CGPath];self.circle.position = CGPointMake(whatever suits you);self.circleView.layer.mask = self.circle;[self.circleView.layer.mask setValue: @(1) forKeyPath: @"transform.scale"];

And something like this for scaling it

CABasicAnimation *scale = [CABasicAnimation animationWithKeyPath:@"transform.scale"];scale.fromValue = [self.circleView.layer.mask valueForKeyPath:@"transform.scale"];scale.toValue = @(100);scale.duration = 1.0;scale.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];[self.circleView.layer.mask setValue:scale.toValue forKeyPath:scale.keyPath];[self.circleView.layer.mask addAnimation:scale forKey:scale.keyPath];

PD: AnchorPoint is by default (.5,.5) according to apple documentations...but we all know that does not mean anything right?

Hope it helps!!