Animating Hello Cocoa!

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)

Published by Mark Brownsword

I've been working as an enterprise developer for about 15 years, always using .NET platform and mostly using Oracle databases. My degree is in Business Studies, majoring in information systems, where I learnt the fundamentals of software engineering for building systems for business.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s