Core Animation Phantom Fade

2008 05 21
Core Animation Phantom Fade

Have you ever seen ghosting when creating layers and animating them to a new position ? I have, and I've been puzzled. In CocoaNav, the frameworks gradually move to the back, and once they're loaded they all move up front on the same plane. Once I messed up so bad to actually see Core Animation fading between the two positions !

Animating squares, this looks like that :

Image:Core Animation Phantom Fade.png

You're expecting layers to smoothly move to their new positions, but they're fading instead. Turns out it's because creation and animation are done in the same transaction. You're telling CA to create and animate, CA then tries to move from N objects to N+1 objects smoothly. It does that with a fade.

The fix

Do it in two transactions. Use a zero duration transaction for creating your layers, then animate them.

// Creation transaction, zero duration
[CATransaction begin];
[CATransaction setValue:[NSNumber numberWithFloat:0] forKey:kCATransactionAnimationDuration];
[self addRect:NSMakeRect(0, 50, 90, 100)];
[CATransaction commit];

// Animation transaction, whatever duration you want
[CATransaction begin];
[CATransaction setValue:[NSNumber numberWithFloat:duration] forKey:kCATransactionAnimationDuration];
[self animateLayers];
[CATransaction commit];

You'll then see what you expected : smooth animation to the new positions.