November 15 2009

iPhone Tip: Fading Views In and Out

by Brian Dunagan

Most iPhone apps have a splash screen. It's a PNG image called Default.png that gets automatically displayed (if present) when an app starts. Apple uses the image to make an app appear to load faster than it actually does, by making the splash screen a screenshot of the initial view.

A couple days ago, I stumbled across an excellent tip for fading out Default.png using Core Animation. The original version faded the image out by expanding it and lowering its alpha value. It's a great effect, but I preferred a more general method. The code below is for a UIViewController subclass and fades out any subview. It brings the subview to the front, reduces the alpha to zero over a half second, then sends the view to the back. I use it to fade out the splash screen after the app launches and to fade out the root table view (thereby displaying the splash screen) if the user deletes all its items.

// in UIViewController subclass

- (void)animateSubviewAway:(UIView *)subview {
       if (subview == nil) return;
       self.animatedSubview = subview;
       [self.view bringSubviewToFront:subview];

       [UIView beginAnimations:nil context:nil];
       [UIView setAnimationDuration:.5];
       [UIView setAnimationDelegate:self];
       [UIView setAnimationDidStopSelector:@selector(animationDidStop:finished:context:)];
       self.animatedSubview.alpha = 0.0;
       [UIView commitAnimations];
}

- (void)animationDidStop:(NSString *)animationID finished:(NSNumber *)finished context:(void *)context {
       [self.view sendSubviewToBack:self.animatedSubview];
       self.animatedSubview.alpha = 1.0;
       self.animatedSubview = nil;
}