Wednesday, November 19, 2008

Fading Default.png when iPhone app starts

More iPhone code. I wanted to have the startup logo (Default.png) graphic fade into the first screen after the program starts. This is a much nicer transition than just letting the view switch instantly.


1) Add the new image view to the class.

UIImageView *splashView;

And add this selector:
- (void)startupAnimationDone:(NSString *)animationID finished:(NSNumber *)finished context:(void *)context;


2) at the very bottom of "applicationDidFinishLaunching" add:

splashView = [[UIImageView alloc] initWithFrame:CGRectMake(0,0, 320, 480)];
splashView.image = [UIImage imageNamed:@"Default.png"];
[window addSubview:splashView];
[window bringSubviewToFront:splashView];
[UIView beginAnimations:nil context:nil];
[UIView setAnimationDuration:0.5];
[UIView setAnimationTransition:UIViewAnimationTransitionNone forView:window cache:YES];
[UIView setAnimationDelegate:self];
[UIView setAnimationDidStopSelector:@selector(startupAnimationDone:finished:context:)];
splashView.alpha = 0.0;
[UIView commitAnimations];



3) Add this selector to cleanup the image and save memory.

- (void)startupAnimationDone:(NSString *)animationID finished:(NSNumber *)finished context:(void *)context {
[splashView removeFromSuperview];
[splashView release];
}



4) Awesome bonus bit. Add this below the splashView.alpha = 0.0 line. It adds that extra bit of coolness to the transition.

splashView.frame = CGRectMake(-60, -60, 440, 600);

28 comments:

Aaron said...

Is there a way to do this with the image rotated 90 degrees to the right, for an app starting up in landscape?

PK said...

friggin awesome !!

Yagiz said...

Pretty Cool, all right! :) Thanks!

Tim Harrison said...

Thanks, you help me out loads. :)

Unknown said...

I did not know it is that easy :) Thanks!!

joelm said...

Thanks, excellent implementation!

Unknown said...

Thank you! Very nice.

Unknown said...

Anyway to add more time before it fades/scales? Like an NSTimer?

Cha said...

very nice - easy to follow - and does what is required.

As with all these blogs - for newbies working out where to put the code snippets is always fun :)

Unknown said...

To add more time just increment the;
[UIView setAnimationDuration:0.5];
line to something like
[UIView setAnimationDuration:0.9];

Fili said...

Awesome, thanks a lot! Didn't think it will work with OpenGL too :)

Jacos said...

Thank you so much! Have been searching for this a while now. Very nice!

Jacos said...

Hey, noticed when I load the app the default fades but the image also slide up some pixels before the fade is done, remove it?? My default 640x960 px.

dexertmoon said...
This comment has been removed by the author.
dexertmoon said...

try splashView = [[UIImageView alloc] initWithFrame:CGRectMake(0,40, 640, 920)];

Anonymous said...

Thanks, a real nice addition to my app, cheers for your efforts.

Unknown said...

Just what I was looking for. Thanks a lot!

Joe said...

Love, love, LOVE this tip. Paying it forward, here's a revised version for folks using blocks (and my advance apologies for being seemingly unable to format this properly in comments):

// Define to taste
#define kSplashViewTag 1000
#define kSplashInsetOnFade -60.0

- (void)fadeSplashView {
UIImageView *splashView = [[UIImageView alloc] initWithFrame:window.frame];
splashView.image = [UIImage imageNamed:@"Default.png"];
splashView.tag = kSplashViewTag;
[window addSubview:splashView];
[window bringSubviewToFront:splashView];

[UIView transitionWithView:window duration:kFadeAnimationDuration options:UIViewAnimationOptionTransitionNone animations:^{splashView.alpha = 0.0; splashView.frame = CGRectInset(splashView.frame, kSplashInsetOnFade, kSplashInsetOnFade);} completion:^(BOOL finished){[[window viewWithTag:kSplashViewTag] removeFromSuperview];}];
}

Joe said...

Oops, also:

#define kFadeAnimationDuration 0.5

Ricibald said...

It works great! Thanks!

Peter said...

Great tutorial,

How do you make the splash screen stay on for longer (not just changing the animationDuration, making the animation slower)?

J_moussa said...

where do you put in these codes?!?!?!

Balaji said...

Cool....i added it to my app..... I was a reading a article that showing splash screen is a violation... is that true and why...can somebody tell me

Joe said...

Balaji: It's discouraged. From the iOS HIG:

"iOS applications should start as quickly as possible so that people can begin using them without delay. When starting, iOS apps should:

"Display a launch image that closely resembles the first screen of the application. This practice decreases the perceived launch time of your application.

"Avoid displaying an About window or a splash screen. In general, try to avoid providing any type of startup experience that prevents people from using your application immediately."

For this and more info, see "Start Instantly" under "User Experience Guidelines" here (you may have to scroll a bit to get to the section in question): http://bit.ly/ktm859 - redirects to developer.apple.com

Michael said...

While some guideline may say not to do a splash, every app we've done has done some version of this animation. (The best by far is: app2.it/knifedancing )

shawn said...

Very cool tip. Thanks for publishing this. I would have spent half the day trying to get something like this to work!

Jason TEPOORTEN said...

Hi,
Thank you VERY much for providing the code to fade out the Default.png file.
I've been looking for this effect, and the code works great!
Kind Regards,
Jason TEPOORTEN

Zebs said...

Thanks for this code. Just been struggling with it myself as my app uses storyboards and the animated splash screen was not showing. I found that I need to make the window visible before the animation starts. Do this by doing window.makeKeyAndVisible in your pplication:didFinishLaunchingWithOptions:, before all the animation code.