40 minutes

Basics, Stroke End

iOS Launch Screen Animation

In this tutorial we will create an iOS launch screen animation with Flow and integrate it into an existing Xcode project.

First…

Grab the files

The Files

There are two main components to this project: a) a design file we’ll use to generate an iOS app, b) a flow file with an animation that we’ll use as the launch animation.

The Travel App

The file we’ll work with is a concept layout for a Travel app. In Sketch it looks like this:

We’ll use this to generate an Xcode project that will be our “mockup” application.

The Wordmark

The other file we’ll use is a .flow file with a simple animation of the Flow wordmark.

We’ll dive into why this animation works in the next section.

Other Files

In the .zip you just downloaded (link above if you missed it), there are a few other files:

• wordmark.sketch - the file that we used to generate the animation.
• BarcelonaLayout.flow – a non-animating flow file that we’ll use to generate an Xcode project.
• Barcelona - A folder containing the base Xcode project (for reference).
• Wordmark - A folder containing the Xcode project with our animation (for reference).
• LaunchDefault.mov - A snippet of the default behaviour (i.e. a quick fade to the first view of the app).
• Wordmark.mov – A snippet of what the loading animation looks like, played back in Flow.

Create the Travel App Xcode Project

Let’s create the Xcode project that we’ll use as our existing app, into which we will add a launch animation.

Generate the Xcode Project

1. Open BarcelonaLayout.flow
2. Press ⌘⬆︎E to open the Export dialog window
3. Click Configure next to the iOS option
4. Rename the folder and project name fields to Barcelona, then hit save
5. Select the iOS option, and the Timeline
6. Select a directory into which you want to save your project
7. Hit Export!
8. Open the xcode project and run the iPhone X simulator

The LaunchScreen

Let’s have a look at how the Xcode launch screen is set up.

1. In Xcode, navigate to and select LaunchScreen.storyboard
2. The storyboard has a Flow logo in the middle of the screen
3. Select the logo
4. In the properties panel, tap the Identity Inspector and you’ll see that the logo is a UIImageView
5. Tap the Attributes Inspector and you’ll see that the image used is called FlowWordmark
6. Tap the Size Inspector and you’ll see that the dimensions of the image are 290x60

The Wordmark Asset

Let’s dig into where you can find the actual asset.

1. Navigate to the Assets.xcassets
2. Selecte the wordmark asset
3. Tap on the asset itself to select it
4. Right-click and select Show In Finder
5. Open the wordmark.pdf file

The wordmark is just a pdf. You’ll notice that the wordmark.sketch file has an artboard that is the exact same dimensions as the pdf you just opened. We’ll use this fact to animate the launch screen.

When we were working on our export template, we generated the wordmark asset using the wordmark.sketch folder and included it in the launch screen of the exported xcode project.

LaunchScreen Explained

The launch screen is a single flat / static layout. In Xcode / iOS you CANNOT animate the launch screen – in fact, you can’t even add any custom views to that storyboard.

When your app launches, it will fade from the launch screen to the first view of your app.

The trick to creating a launch screen animation is:

The animation's start state needs to be EXACTLY the same layout as the launch screen.

Create the Launch Animation

For this tutorial we’re a bit lucky – Flow already exports projects that have a launch screen with an asset – all we have to do is create the aniamation.

1. Open wordmark.flow
2. Press ⌘⬆︎E to open the Export dialog window
3. Click Configure next to the iOS option
4. Rename the folder and project name fields to Wordmark, then hit save
5. Select the iOS option, and the Timeline
6. Select a directory into which you want to save your project
7. Hit Export!
8. Open the xcode project and run the iPhone X simulato
9. Tap the simulator to see the animation run

The sketch file was designed so that it's starting position is identical to the exported launch screen. This is why it looks like we're animating the launch screen.

Automate the Animation

We want the animation to automatically trigger when the app launches.

1. In the Xcode project, navigate to SceneViewController.swift
2. Add the following code…

Now the animation will trigger as soon as the view appears on the screen.

public override func viewDidAppear(_ animated: Bool) {
    timeline.animate()
}

HIT PLAY!

Integrate

Alright, it’s time to work some magic. The next few steps will integrate code from the wordmark.xcodeproj into the barcelona.xcodeproj, and at the end we’ll have added a launch animation to an iOS app!

Rename: Wordmark

First, we need to rename things otherwise we’ll get some decent clashes in Xcode. Do the following in wordmark.xcodeproj:

1. Rename the file SceneViewController.swift to WordmarkViewController.swift
2. In WordmarkViewController.swift select the name of the class SceneViewController then right-click and choose Refactor > Rename
3. Change SceneViewController to WordmarkViewController
4. Rename the file SceneView.swift to WordmarkView.swift
5. In WordmarkView.swift select SceneView then right-click and choose Refactor > Rename
6. Change SceneView to WordmarkView

By default, Flow exports the main scene of an animation as a SceneView… Since we have 2 projects exported from Flow they will both have the same class name. So, without the steps we just completed, Xcode would yell at us if we tried to merge the two projects.

If Xcode throws an error while you're refactoring, try quitting Xcode.

Rename: Barcelona

Next, we need to rename things in barcelona.xcodeproj:

1. Rename the file SceneViewController.swift to BarcelonaViewController.swift
2. In BarcelonaViewController.swift select the name of the class SceneViewController then right-click and choose Refactor > Rename
3. Change SceneViewController to BarcelonaViewController
4. Rename the file SceneView.swift to BarcelonaView.swift
5. In BarcelonaView.swift select the name of the class SceneView then right-click and choose Refactor > Rename
6. Change SceneView to BarcelonaView

We don’t need to rename this project, per se, but it’s always nice to have clean code.

Copy Files

Now, we drag the three main wordmark files into the barcelona project.

1. In barcelona.xcodeproj add a new group to the project navigator called Wordmark
2. Drag WordmarkView.swift, WordmarkTimeline.swift and WordmarkViewController.swift into the new group you created in the barcelona project

Hit Play to make sure that the barcelona project compiles

The Animation View Controller

To create our animation effect, we want our application to build a view controller that lives “in between” the LaunchScreen and our application’s primary view controller.

Create a new ViewController

We do this in Interface Builder.

For those of you lovely creatures who aren't experienced with Xcode, please watch the video below to see where all the fields and things in Xcode are located.

1. Select Main.storyboard from the project navigator.
2. From the Utilities panel (on the right), drag a new view controller instance onto the storyboard
3. Select the view controller, then change it’s type to WordmarkViewController in the identity inspector
4. Drag a new view from the utilities panel into the new view controller
5. Change its size to 290 x 60
6. Center the view to the controller
7. Add constraints for fixed width and height
8. Add constraints for centering vertically and horizontally
9. Change the type of the view to WordmarkView
10. Right-click on the view controller, then connect the scene outlet to the view you just created
11. Drag the initial view controller arrow so that it points to the WordmarkViewController you just created

Trigger the Transition

The last step…

In the ViewDidAppear method, add a bit of code to make the whole method look like this…

public override func viewDidAppear(_ animated: Bool) {
    timeline.animate()
    DispatchQueue.main.asyncAfter(deadline: .now()+1) {
        self.showBarcelona()
    }
}

The DispatchQueue nonsense tells the application to run the transition method one second after the animation begins (i.e. .now() + 1)

HIT PLAY