Creating A Launch Animation With Content on the First Frame

If your animation has content on the first frame, then you need to spend a bit of time in Xcode to make the launch sequence look smooth.

In this tutorial, we’ll export an animation with content on the first frame – it will also have a blue background.

Grab this animation to begin:

blueLaunch.flow

Generate Launch Animation

First thing to do is generate a launch animation from Flow using the file you just downloaded.

Export the animation using the iOS - Launch Animation option.

Here’s what your initial project will look when you run it:

Animation Background

Let’s start by changing the background color for the animation view.

In Xcode:

  1. Select Main.storyboard
  2. Select the view from the Artboard View Controller Scene
  3. In the properties panel, navigate to the Attributes Inspector
  4. Change the background color to blue

Great, now your launch animation will look like this:

Launch Screen

Next, let’s prepare our launch screen to match our animation.

In Xcode:

  1. Select LaunchScreen.storyboard
  2. Select the view from the View Controller Scene
  3. In the properties panel, navigate to the Attributes Inspector
  4. Change the background color to blue

Our next task is to create the asset that will match up with the first frame of our animation. This is quite easy to do.

In Flow:

  1. Move the playhead to the beginning of the animation
  2. Hit ⇧⌘F to export the current frame
  3. Repeat the last step 2 more times for 2x and 3x resolution versions, adding an @2x and an @3x respectively, to the file name.

The file names we used were:

  • blueLaunchScreenFirstFrame.png
  • blueLaunchScreenFirstFrame@2x.png
  • blueLaunchScreenFirstFrame@3x.png

In Xcode:

  1. Select the assets folder from the project navigator
  2. Drag the 3 images into the assets folder

This creates an asset that has 3 resolutions, it will look good on all retina devices.

Next, we’re going to add an image view to the launch screen.

  1. Select LaunchScreen.storyboard
  2. Tap the Library button at the top-right of the window
  3. In the library window, search for the term: image
  4. Drag an image view onto the main view
  5. Set the name of the image to the name of your asset
  6. Select the size inspector
  7. Change the size of the view to 320 x 68
  8. Drag the image view to the center of the main view
  9. Add horizontal and vertical constraints
  10. Add width and height constraints
  11. Hit RUN

There will now be a smooth transition fom the launch screen to the first frame of your animation.

Here's the launch sequence captured from an iPhone X.

Run on an iPhone

You might not actually see the proper launch sequence in the iOS Simulator. We suspect it’s because of the time it takes to start up the simulator.

It’s best to check this launch sequnce directly on an iPhone. And, even better by compiling it from Xcode, quitting the app, and restarting via the app icon on the device.

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 “”.