AnimationKeyConcepts

Tags icon

Key Concepts for Launch Animations

Alright, you've got a great animation that you want to use for the launch of your app. Before you share it with a developer, there are a couple of key concepts you should learn.

The Three Launch Views

A launch animation iOS app has 3 main views / components to it:

  1. The launch screen view
  2. The animation view
  3. The first view of the app
threeStages
Launch Screen > Animation View > App (First View)

Launch Sequence

A launch animation starts directly from the app icon. Let’s analyze the standard launch animation for an Flow iOS export.

evoAppIcon
A launch animation starts by tapping an app icon.

After tapping the icon, the launch screen “image” grows until it takes up the full view of the device.

flowLaunchHalfway
Halfway through a Flow app's launch screen.

Launch animations actually start JUST BEFORE the launch animation fills the view of the device.

flowAnimationHalfway
Animations start before taking up the full screen.

When the animation completes, the animation view fades to the first view of the app.

flowFirstView
First view of the Flow app we just opened.

Evo Animation Breakdown

The Evo carshare app has a fantastic animation, here’s a look at it in glorious looping detail.

evoLaunch
Fast. Simple. Pretty. Yum.

Let’s have a look at the animation in more detail.

Things to note:

  • The launch screen looks just like the first frame of the animation
  • The animation takes about 1.25s
  • There is an offset between the launch screen and the first frame, causing a slight shift as the app transitions to the animation view.
  • Total time from tapping the app icon, to the app loaded is ~3.25s

The Smallest Screen

Our suggestion is to design your launch animations to fit the smallest screen your on which your app will be available.

If you don’t, there’s a good possibility your animation might get clipped.

For example, let’s say you’ve started with an artboard that fits an iPhone 8 Plus:

iphone8
The artboard fits perfectly to the iPhone 8 Plus screen.

Now… the same animation will be clipped if it is run on any of the following devices:

clippedDevices
SE, 5s, 6, 6s, 7, 8

Apple recently phased out production of the 5/SE, 6, and X iPhone models… So there should be a bunch of those kicking around for the next few years.

Contain Your Animation

Following from the previous point, you should contain your animation within the smallest frame that you are designing for.

This is important when your launch animation is available on larger devices.

Let’s say you’ve created a launch animation for an iPhone SE screen size, with something coming in from the left…

animationEdgeSE
The logo animates in from the left.

This will look great on an iPhone SE.

animatedSE

However, on any larger device, this animaiton will be clipped to the edge of the artboard…

masked
A frame from the above animation on larger devices.
The size of the artboard is higlighted on the right.

Solid Backgrounds

If you design your launch animation with a background color, or a shape that fills the artboard, you will find that launching on larger screens may look something like this:

solidBackgroundFirstLaunch
By default, the background color of the main view in iOS is white.

This is easily fixed in Xcode.

Follow these steps:

  1. In Xcode, select main.storyboard
  2. Select the main view of the Scene View Controller layer
  3. Change the background color of the view
xcodeChangeBackground

Now, your animation will be centered and the background color on any larger device will match your animation.

solidBackgroundFixed

You could also export an animation with a clear background color and follow the same steps as above.

First Frame Content

Like the Evo example above, if the first frame of your animation has content, then you’ll need to sync this with the LaunchScreen.storyboard file included in your Xcode poject. This is fairly easy to do, and can be done in many ways.

Here’s how we did this for the Flow launch animation that comes with the standard iOS export option.

launchScreenAsset
We included an image asset of the first frame of our animation.
launchScreen
The launch screen storyboard has that image aligned perfectly with the first frame of our animation.

This actually takes a few more steps, so if you’re interested, then check out our tutorial on Creating A Launch Animation with Content on the First Frame.

background Made with Flow.
underscore Made with Flow.
line2 Made with Flow.
line1 Made with Flow.
circle Made with Flow.
hit Made with Flow.

result(s) found for “”.