From my early days of software development I’ve had a passion for layout and building the harness that loads views on demand from a menu. I’ve been able to express this passion using many technologies including C# (WinForms & XAML), HTML + CSS and now Cocoa! Since the Hello Cocoa sample application has a sidebar intended to load views on demand, I thought it would be interesting to see what animation capability exists in Cocoa and try to slide the views into place when they are selected from the sidebar menu. I found many blogs, articles and books that promoted the simplicity of Core Animation, though I found it to be a confusing topic to approach (e.g. implicit v explicit animation), but after some perseverance I worked out how to achieve my goal. The steps to setup animation in Cocoa are straight forward;

Link to the QuartzCore Framework and then add an import to Prefix.pch (under supporting files folder);

#import <QuartzCore/QuartzCore.h>

Turn on view layer backing and add a custom animation to the animations dictionary;

- (void) awakeFromNib {
  CATransition *animation = [CATransition animation];
  animation.type = kCATransitionMoveIn;
  animation.subtype = kCATransitionFromLeft;
  animation.duration = 0.75f;
  animation.delegate = self;
  animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];

  [self.contentView setWantsLayer:YES]; // Turn on backing layer
  [self.contentView setAnimations:[NSDictionary dictionaryWithObject:animation forKey:@"subviews"]];
}

Call replaceSubView:with method on the parent containers animator proxy;

- (void) switchView: (NSString *)name {
  NSView *existingView = [[self.contentView subviews] objectAtIndex:0];
  NSView *newView = [self getViewWithName:name];
  [[self.contentView animator] replaceSubview:existingView with:newView];
}

One major challenge I faced was in the choice of parent container. Initially I chose an NSBox, but realised that my views weren’t anchored when the window resized. After some experimenting I came up with a less than ideal, but working solution using an NSSplitView with only a single content view. The NSSplitView automatically anchors its content when loaded, so the views resize when the window resizes.

Once you’ve learnt the tricks, I have found Core Animation to be an elegant technology that is well integrated into Cocoa and with some time spent to master the details you will be rewarded with a user interface that is above the average. Core Animation for Mac OS X and the iPhone from The Pragmatic Bookshelf is a good guide to learning Cocoa animation capabilities. Checkout the download to see an example of animating Cocoa views.

 Download source (1.8 MB)