Integrate an Animation into iOS

In this blitz of a doc, we're going to show you how to integrate a Flow animation into an iOS project using our Cocoapod. It's dead-easy... watch this.

Flow Logo Animation

Set up a Project (if you need to)

If you don’t have an iOS project you’re already working on, then create one now. If you’ve already got a project, skip to the next section.

This step starts at 0:19

1. Create a new Xcode Project
2. Choose iOS - Single View App
3. Name it FlowIntegration
4. Save it to the Desktop
5. Run it (just to get things warmed up)

Install FlowCommoniOS

Flow exports solid Swift code. But, it needs a few lightweight extensions to properly integrate with UIKit. So, let’s install our cocoapod.

This step starts at 0:49

1. Open the Cocoapods app
2. Create a New Podfile from Xcode Project
3. Add pod 'FlowCommoniOS', '~> 1.8.4'
4. Hit install
5. Open the newly created workspace

Export From Flow

Now, let’s output an iOS export…

This step starts at 1:47

1. Download the file above (if you haven’t already)
2. Export the FlowLogoAnimation timeline using the iOS option
3. Open the exported iOS project

Import Your View and Timeline

Next, you need to drag a few files into your project.

This step starts at 2:21

1. Drag SceneView and FlowLogoAnimationTimeline into your project
2. Contain them in a new group (optional)
3. Add import FlowCommoniOS to both of those files

Add Your View

Next, you need to add a view to your app. We’re using storyboards. If you’re using SwiftUI, or another approach, just adapt the next few steps to your needs.

This step starts at 3:10

1. Add a new View to your storyboard.
2. Resize it to 345 x 240
3. Add constraints
4. Change its type to SceneView

Did the animation appear in Interface Builder?! Flow’s views are @IBDesignable ;)

Connect Your View

Now, let’s connect everything up.

This step starts at 4:44

1. Drag an outlet from your storyboard into your main ViewController
2. Name the variable sceneView
3. Create a new variable called var timeline: Timeline!
4. In viewDidLoad instantiate the timeline like this:

   timeline = FlowLogoAnimationTimeline(view: sceneView, duration: 3.5)
   

5. In viewDidAppear trigger the animation like this:

   timeline.play()
   

6. Hit play.

So easy.

Repeat the Animation

To make an animation repeat, add a variable to the constructor.

This step starts at 6:14

1. Add a repeatCount to the timeline constructor so that it looks like this:

   timeline = FlowLogoAnimationTimeline(view: sceneView, duration: 3.5, repeatCount: .greatestFiniteMagnitude)
   

2. Hit play

Sooooo easy.