Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Can I Animate an image iOS8 LaunchScreen.xib

Question:
Are there ways to animate anything within the LaunchScreen.xib file of an Xcode 6 Project targeted to deploy for iOS 8.1+ ?


Context:
I'm looking to make simple animations to convey activity or serve as a distraction to the user while they wait...


Examples:

  • A Loading Bar
  • Activity Indicator
  • Animated GIF
  • Move a UIImage across the Screen
  • Rotate an Image
like image 443
JThora Avatar asked Feb 19 '15 16:02

JThora


2 Answers

Nope.

The Launch Image is shown only during the time period between when the user chooses to launch your app and when your app has actually started running. During this period, your app can't take any actions such as performing an animation — it's not running yet. The Launch Image is just a static image that, when well designed, helps give the user the impression that your app is ready quickly.

(Some developers ignore the HIG and use the launch image to provide a splash screen, sometimes with an animated presentation. But in those cases, the launch screen is still a static image, and the animation happens once the app begins running — it's just that the first frame of animation drawn by the running app matches the appearance of the static launch image.)

This behavior didn't change with the LaunchScreen.xib feature in iOS 8 — it still appears only before your app is actually running, so it's still a static image. What the LaunchScreen.xib feature gets you is the ability to adaptively produce a launch image for many different device sizes and styles without having to separately design, render, and ship in your app bundle different images for each size/orientation/etc.

If your app isn't actually ready to use by the time it gains control, think about whether the "loading" tasks you're doing at that time really need to be done immediately, or if you can let the user start doing some things right away and do more setup work on a background thread or defer it until it's actually needed.

like image 121
rickster Avatar answered Oct 10 '22 23:10

rickster


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 [email protected] 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/

like image 33
Lucas Fray Burchardt Avatar answered Oct 10 '22 22:10

Lucas Fray Burchardt