Export Your Animation To Code

In this episode we're going to export code so let's get right to it.

Your Animation

We created the LikeButton animation in the previous tutorial…

This step starts at 0:12

… now we’re going to export it to code.

Housekeeping

First thing we want to do is rename our Timeline, and Scene.

This step starts at 0:37

1. Double-click on the name of the Timeline.
2. Rename it to LikeTimeline
3. Select the Scene by clicking on its title label.
4. Rename the scene to unliked in the properties panel.

Export Your Animation!

There are many options for exporting code (and we’ll be adding more as Flow grows).

Export iOS and HTML

Let’s export two projects at the same time – iOS and HTML.

This step starts at 0:53

1. Press ⌘⇧E(Command+Shift+E) or o to File > Export > Code
2. Select the LikeTimeline option on the left.
3. Select the iOS and HTML options on the right.
4. Click Export.
5. You can then use the Open Folder button, or navigate to the project using Finder.

Your Animation in iOS

When you export to iOS it exports in a full Xcode project, let’s open that up and see the animation in the simulator.

You’ll need to: Grab Xcode for Free.

This step starts at 1:10

1. Double-click the LikeTimeline.xcodeproj file.
2. Select the iPhone X simulator.
3. Hit the Play or ⌘R icon at the top of the Xcode window.
4. Your animation will eventually open in the Simulator.
5. Click the app to play the animation, double-click to reset it, and drag to scrub through it.

Fix the Clipped Icon

There’s a little bit of clipping going on with the plusIcon. Let’s fix it.

This step starts at 1:46

1. Go back to Xcode.
2. Open the LikeViewController.swift file.
3. Change the value of unlike.clipsToBounds to false
4. Play the Simulator again.

WHAM.

The Xcode Project

Let’s have a quick look at the Xcode project, there are two main elements: our code, and yours.

Flow Common

Flow’s export code doesn’t rely on opaque 3rd-party APIs. However, it does require a few lightweight classes that help sync your animations with UIKit, Apple’s native API for programming.

This step starts at 2:17

To get an overview of the files in FlowCommon, please watch the video above, or have a look at our FlowCommon Docs.

Animation Files

The code for your animation comes as 3 separate files.

This step starts at 5:29

1. LikeView.swift – the main view and starting state of your animation.
2. LikeTimeline.swift – a representation of your animation in code – i.e. the ENCODED version of your animation.
3. LikeViewController.swift – a class that syncs together the view and the timeline.

To get a deeper overview of these files, please watch the video above, starting at 2:17.

Interface File

Xcode constructs its interfaces from storyboard files. You’ll find the layout for your animation in the Main.storyboard file.

This step starts at 7:29

To get a deeper overview of this files, please watch the video above, starting at 7:29.

A Quick Look at the HTML

Before we move onto the next episode what we can do is we can look at HTML.

This step starts at 8:17

1. Go back into Finder
2. Navigate to the project folder that you exported from Flow.
3. Click into the HTML > LikeTimeline folder.
4. Double-click the LikeTimeline.html icon to launch your animation in a browser.
5. Press the play button, or drag the slider to scrub through the animation.

In another episode we’ll go through the structure of the HTML project and for now let’s move on.

Up Next

In the next screencast we’re going to integrate your animation into a real iOS project.

Integrate Your Animation into an iOS Project