How Do I Create an Opening Animation Sequence for iOS Apps?

How Do I Create an Opening Animation Sequence for iOS Apps?

Ever wondered how some of your favorite iOS apps (like Twitter) create those cool opening animations when the application loads?

Well – wonder no more!

The place you work this magic is in your application’s AppDelegate file.

More specifically, the work is performed inside the didFinishLaunchingWithOptions method, just after you make your window key and visible:

- (BOOL)application:(UIApplication *)application 
  didFinishLaunchingWithOptions:
  (NSDictionary *)launchOptions
{
self.window = [[UIWindow alloc] 
  initWithFrame:[[UIScreen mainScreen] bounds]];

// Your other launch related code here...

[self.window makeKeyAndVisible];

UIImageView *imageView = [[UIImageView alloc] 
  initWithFrame:[[UIScreen mainScreen] bounds]];
imageView.image = [UIImage imageNamed:@"myImage"];

imageView.contentMode = UIViewContentModeCenter;
imageView.backgroundColor = 
  [UIColor colorWithRed:89.0/255.0 
  green:152.0/255.0 blue:201.0/255.0 alpha:1.0];
[self.window addSubview:imageView];

[UIView animateWithDuration:3.0 animations:^{
  imageView.alpha = 0.0f;
} completion:^(BOOL finished){
  [imageView removeFromSuperview];
}];

return YES;
}

The code is fairly self explanatory, though this example is admittedly very simple.

The steps?

  • Create an image view.
  • Load it up with one (or more) images.
  • Set whatever options (sizing, etc.) you want on the image.
  • Add the image view as a subview to your main application window
  • Perform your animations. In my case, I chose to use the UIView class method, animateWithDuration, since it allowed me to easily do cleanup, once my applications finished animating. In this example, I simply fade the initial image… but you can follow your imagination here.
  • When your animations complete, remove your image view from the application’s super view.

That’s it.

Happy Coding!

Advertisements

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