I'm trying to make a simple animation using Core Animation to draw a simple bar that grows (like a progress bar).
So, the bar starts at x = 0 with 0 width and grows to fit the frame.
But, when I animate bounds.size.width, the origin point is considered the center of the layer and it grows outwards in both x directions, whereas I want it the furthest left point of the bar to always be 0 and the furthest right to change with the animation -- again, like a progress bar.
Do I have to animate an additional property or is there something other than bounds.size.width I should be using to achieve this?
For reference, here's what I have right now:
CABasicAnimation * animation;
animation = [CABasicAnimation animationWithKeyPath:@"bounds.size.width"];
animation.fromValue = [NSNumber numberWithInt:0];
animation.toValue = [NSNumber numberWithInt:(self.frame.size.width / 2)];
[animation setValue:@"primary_on" forKey:@"animation_key"];
animation.duration = duration;
[primaryMask addAnimation:animation forKey:@"primary_on"];
(primaryMask is a CALayer)
Same thing happens in this scenario:
animation = [CABasicAnimation animationWithKeyPath:@"bounds"];
CGRect oldBounds = CGRectMake(0, 0, 0, self.frame.size.height);
CGRect newBounds = CGRectMake(0, 0, self.frame.size.width / 2, self.frame.size.height);
animation.fromValue = [NSValue valueWithCGRect:oldBounds];
animation.toValue = [NSValue valueWithCGRect:newBounds];
You need to set
layer.anchorPoint = CGPointZero;
By default this property is {0.5, 0.5} which is the centre of the layer.