Our approach to iOS export is a sweetly balanced blend of UIView and Core Animation.
To get started, let’s look at a simple file with only a single shape on it.
We use the same file for the HTML export docs.
You can also grab all the exported iOS files here:
When exporting to iOS, Flow creates a full Xcode project that can spin up in the simulator (or on a device) as soon as you can hit run.
Our goal with exporting to Xcode is to have (aside from some common files) as little extra code as possible. We treat the main scene of your animation as a single view that contains all the elements in your animation. For a given animation, we generate the following:
Aside from those files, there are a few common files that we use to keep things flexible.
We generate a view classes that help us keep exported code tight. Here they are in all their alphabetical glory.
This animation class contains variables for setting all the animation properties you can set in Flow. It has a couple of extensions for configuring
CABasicAnimation as well as executing
It also has methods for executing animations.
An extenstion to
CGPath that handles parsing and converting SVG code to proper
Here’s a snippet:
This is an incredidbly useful class that lets us keep our export consistent from Flow to any platform.
A subclass of
UIView that sets up a basic view with a custom
ShapeLayer and has code for properly parsing actions.
Yes, you can export sounds! This class triggers playback by triggering an
A protocol defining
animate method calls.
An extension that properly handles transforms.
An extension that provides a convenience initializer for quickly creating a shadow object.
An extension that provides a convenience initializer for quickly creating a paragraph style for text objects.
A basic project looks like this:
To get started, let’s look at a case where we have only a single shape that doesn’t animate.
Export the No Movement timeline to iOS
SceneView class contains the initial layout and style for the timeline. The methods defined in this class are interpreted from layer names in the Flow project.
There are 2 common methods:
createViews()sets up all the views for the scene.
addViews()adds all subviews in the same layer hierarchy they have in the Flow project.
Other methods are constructors for the various views in the Flow project. Since the current animation has only one view, we see only the following method:
A few things to note.
redis the same name as the layer in Flow.
ShapeView, which is a subclass of the native
There is a timeline, but there’s nothing in it.
As you can see, you can pass a
SceneView to a timeline. This is convenient if you have generated more than one animation for a specific layer structure in Flow. For example, if you created separate timelines for a forward and a backward animation.
There is a
SceneViewController that loads everything up, creates a timeline and has a method for initiating that timeline.
It has a
IBAction that is tied to the main
.xib for the project.
The next timeline moves the shape from left to right.
Export the BasicMovement timeline to iOS
After exporting, you’ll notice that the Xcode project files are basically the same.
The only difference to this project is a few lines in the
animate() method triggers an
Animation (i.e. from FlowCommon), and the
reset method puts everything back to its original starting position.
The third timeline in our document has a more complex animation.
Export the Complex timeline to iOS
Again, the only difference between this and the other two projects is the timeline.
For all you devs out there… Imagine trying to build this from scratch by watching a video that you were given during handoff…
There are so many keyvalues that the animation method is about 140 lines of code!
The best way to handle animation on iOS is to harness the power of
Core Animation libraries – and Flow does just that.
The common files we export, as well as the custom files, are both light and relatively easy to work with.
Honestly, once you drop FlowCommon into your project you'll never really need to look at or edit any timeline code if it's been animated properly in Flow.