Question

I have a CALayer with a circle drawn to it at its final size. I want to animate the circle in, such that it starts at 1% scale and finishes at 100%. Right now the animation is not very smooth because the edges flicker while it’s scaling. At the final size the circle looks right. I’m wondering if there’s a way to have anti-aliasing during the animation itself.

CATransform3D fromTransform = CATransform3DMakeScale(0.01, 0.01, 1.0);
CATransform3D toTransform = CATransform3DMakeScale(1.0, 1.0, 1.0);

CABasicAnimation *theAnimation = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
theAnimation.duration = 1.5;
theAnimation.fromValue = [NSValue valueWithCATransform3D:fromTransform];
theAnimation.toValue = [NSValue valueWithCATransform3D:toTransform]; 

[myLayer addAnimation:theAnimation forKey:@"animateScale"];

Answer 1

I don’t think there is a way to change the way layers scale. However, you may be able to achieve better results by rendering your circle at several resolutions into different-sized layers, and by animating them simultaneously — scaling and fading in/out progressively larger layers until you get to the final, full-sized layer.

You may also try drawing the circle directly frame by frame instead of animating the layer size — if the drawing is fast enough, you’ll keep good framerates, and you’ll have no scaling artifacts whatsoever. If you choose this path, it’s usually best to do this on a separate thread that is dedicated to this animation rather than using the main thread.

In similar situations, I usually just end up softening the edges on my drawing — a well-chosen shadow or bloom does wonders for reducing aliasing artifacts, and it’s much simpler to do than any other solution. (Note also that the stroke width of the circle scales with the layer: if you draw a white circle on black backround using a line width of 1 pixel at full size, then at 1% the line will be only 0.01 pixels wide!)