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:

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

    ReplyDelete
  2. Pretty Cool, all right! :) Thanks!

    ReplyDelete
  3. Thanks, you help me out loads. :)

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

    ReplyDelete
  5. Thanks, excellent implementation!

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

    ReplyDelete
  7. 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 :)

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

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

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

    ReplyDelete
  11. 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.

    ReplyDelete
  12. This comment has been removed by the author.

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

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

    ReplyDelete
  15. Just what I was looking for. Thanks a lot!

    ReplyDelete
  16. 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];}];
    }

    ReplyDelete
  17. Oops, also:

    #define kFadeAnimationDuration 0.5

    ReplyDelete
  18. Great tutorial,

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

    ReplyDelete
  19. where do you put in these codes?!?!?!

    ReplyDelete
  20. 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

    ReplyDelete
  21. 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

    ReplyDelete
  22. 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 )

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

    ReplyDelete
  24. 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

    ReplyDelete
  25. 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.

    ReplyDelete