LaunchAnimationHeader

Time icon
Tags icon

Export Launch Animations for iOS

In this tutorial, you'll learn how to export launch animations for iOS.

Export

Your animation is ready, and you want to create an actual iOS launch animation.

  1. Hit ⇧⌘E, or File > Export > Code
  2. Choose the iOS - Launch Animation option
  3. Select your timeline
  4. Hit Export

Done!

Flow’s iOS - Launch Animation template will take a selected timeline and build it into a basic iOS app that contains the necessary views and timing for including a launch animation.

That’s it, really.

Really.

You can go home now.

And all your apps can have launch animations.

A Simple Launch Animation

If you don’t already have an animation, you can start with ours:

LaunchAnimation.flow

The animation looks like this:

flowLaunchAnimationAnimated

The Flow file looks like this:

launchAnimationFlow

Key Concepts

There are three things to note with this design.

  1. The artboard frame is 320 x 320.
  2. There are no layers that fly in from off the artboard. In other words, the animation is contained within the frame of the artboard.
  3. There is no content on the first frame of the animation.

You should check out our tutorial: Key Concepts for Launch Animations

Launch Animation with Content on the First Frame

There *can* be content on the first frame of your animation, it just needs some tweaking to get right.

For more detail, check out how to: Create Launch Animations With Content on the First Frame

Xcode Project

Exporting an iOS launch animation from Flow generates a clean Xcode project that looks like this:

xcodeProject

For more detail, check out: Xcode Project Breakdown for Launch Animations

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