I don’t use splash screens often but when I do, I want them to open like a book.
In all truth, I’m not a big fan of splash screens and even Apple recommends using a default.png that shows the controls (with no text) of the application:
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.
from HIG Guidelines
However, some people love them and one app in particular has a nice implementation splash screen — Path 2.0. When you open Path, you’re greeted with their logo on a red version of the Apple linen texture that animates open like a book (or journal as that’s what Path considers themselves to be).
You can get the source for this project here: https://github.com/jaysonlane/OpenBook
Before we begin, let me preface this with a disclaimer: I am very new to animations in Cocoa so bear with me. If you spot unnecessary or inefficient code, please leave a comment and I’ll tidy it up.
If you haven’t seen the animation, hop on the app store and pick up a copy to see what we’re trying to accomplish. I’ve created a default png that we can use cleverly titled Math (like a Math book that opens, right?) You can download that here (retina) and here.
To get started, let me explain “the trickery” behind what we’ll be doing: we’re going to use the normal default splash system in place to display our default.png. In the App Delegate, once the application has finished launching, we’re going to create a UIImageView on top of our view of that same default.png. We’ll then animate that UIImageView, to rotate open to reveal our view.
So let’s go:
Create a new project, I created one using the single view template but this will work with whatever. Go ahead and set your default.png and default@2x.png to the images supplied. You can do this by clicking the project in the navigation pane on the left, click the Target and scroll down to launch images:
Open your AppDelegate.m and add the following code to your application didFinishLaunching or application didFinishLaunchingWithOptions function:
//1. add the image to the front of the view...
UIImageView *splashImage = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, 320, 480)];
[splashImage setImage: [UIImage imageNamed:@"Default"]];
[self.window addSubview:splashImage];
[self.window bringSubviewToFront:splashImage];
//2. set an anchor point on the image view so it opens from the left
splashImage.layer.anchorPoint = CGPointMake(0, 0.5);
//reset the image view frame
splashImage.frame = CGRectMake(0, 0, 320, 480);
//3. animate the open
[UIView animateWithDuration:1.0
delay:0.6
options:(UIViewAnimationCurveEaseOut)
animations:^{
splashImage.layer.transform = CATransform3DRotate(CATransform3DIdentity, -M_PI_2, 0, 1, 0);
} completion:^(BOOL finished){
//remove that imageview from the view
[splashImage removeFromSuperview];
}];
Three things are happening here…
1) We create a new UIImageView and add it to the top of the view
2) We set an anchor point on the left side of the image to make it open from the left and then reset the frame to the full size of the view
3) We animate the UIImageView and remove it from the view on completion
That’s it, it’s that simple.
Source: http://jaysonlane.net/tech-blog/2012/03/path-2-0-style-animated-splash-screen-default-png/