Animate views using Core Animation Layer

Question

I have an NSWindow containing a NSView with the included word 'Wants Core Animation Layer'. Then, the view contains many NSImageView that are initially animated in position. When I run the animation, it is extremely sluggish and removes most of the frames. However, if I turn off the 'Wants Core Animation Layer', the animation works fine. I need a basic animation layer, but I can't figure out how to make it work adequately.

Can I do anything to fix performance issues?

Here is the code:

 // AppDelegate NSRect origin = ...; NSTimeInterval d = 0.0; for (id view in views) { [view performSelector:@selector(animateFrom:) withObject:origin afterDelay:d]; d += 0.05f; } // NSImageView+Animations - (void)animateFrom:(NSRect)origin { NSRect original = self.frame; [self setFrame:origin]; [NSAnimationContext beginGrouping]; [[NSAnimationContext currentContext] setDuration:0.20f]; [[self animator] setFrame:original]; [NSAnimationContext endGrouping]; } 

Answer 1

It is possible that NSTimer killing your performance. Core Animation has rich support for managing animation time through the CAMediaTiming protocol, and you should take advantage of this in your application. Instead of using the animator proxy and NSAnimationContext try using Core Animation directly. If you create a CABasicAnimation for each image and set it to beginTime , this delays the start of the animation. In addition, for the delay to work the way you want, you must wrap each animation in a CAAnimationGroup with its duration set to the total time of the entire animation.

Using the frame property can also slow down. I really like to use the transform property on CALayer in situations where you are doing an “open” animation. You can lay out your images in IB (or in code) at your end positions, and right before the window becomes visible, change their transformations to the original position of the animation. Then you just reset convert everything to CATransform3DIdentity to get the interface in its normal state.

I have an example in my <plug type = "shameless"> upcoming Core Animation book </plug> which is very similar to what you are trying to do. It animates 30 NSImageView simultaneously without dropped frames. I changed the example for you and posted it on github . These are the most relevant bits of code with the external UI file removed:

Convert layers to their original position

 - (void)applicationDidFinishLaunching:(NSNotification *)aNotification { // ... SNIP ... // //Start with all of the images at the origin [CATransaction begin]; [CATransaction setDisableActions:YES]; for (CALayer *imageLayer in [[[self imageContainer] layer] sublayers]) { CGPoint layerPosition = [layer position]; CATransform3D originTransform = CATransform3DMakeTranslation(20.f - layerPosition.x, -layerPosition.y, 0.f); [imageLayer setTransform:originTransform]; } [CATransaction commit]; } 

Animate the transformation back to identity

 - (IBAction)runAnimation:(id)sender { CALayer *containerLayer = [[self imageContainer] layer]; NSTimeInterval delay = 0.f; NSTimeInterval delayStep = .05f; NSTimeInterval singleDuration = [[self durationStepper] doubleValue]; NSTimeInterval fullDuration = singleDuration + (delayStep * [[containerLayer sublayers] count]); for (CALayer *imageLayer in [containerLayer sublayers]) { CATransform3D currentTransform = [[imageLayer presentationLayer] transform]; CABasicAnimation *anim = [CABasicAnimation animationWithKeyPath:@"transform"]; anim.beginTime = delay; anim.fromValue = [NSValue valueWithCATransform3D:currentTransform]; anim.toValue = [NSValue valueWithCATransform3D:CATransform3DIdentity]; anim.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut]; anim.fillMode = kCAFillModeBackwards; anim.duration = singleDuration; CAAnimationGroup *group = [CAAnimationGroup animation]; group.animations = [NSArray arrayWithObject:anim]; group.duration = fullDuration; [imageLayer setTransform:CATransform3DIdentity]; [imageLayer addAnimation:group forKey:@"transform"]; delay += delayStep; } } 

I also have a YouTube video if you want to check it out.

Answer 2

Have you tried everything in CATransaction?

 [CATransaction begin]; for {...} [CATransaction commit]; 

CATransaction is a Core Animation engine for batch processing several actions of a layer tree into atomic updates in a render tree.