Integrate Your Animation Into a Real App

In this episode we're going take the animation you've been working on, export it as a custom UIButton and integrate it into a pre-existing iOS app! Integration like this is easy, which is great because it not only shows the power of Flow, but also makes the tutorial fairly short!

Export Your Animation

Through the last four episodes you’ve created an animation, and exported it to code. This time, however, we’re going to export it using a awesome option which wraps your animation in a UIButton so that it can be dropped right into an actual app.

This step starts at 0:08

1. Open your animation in Flow
2. Export the LikeTimeline using the iOS Custom Button option.
3. Open the Xcode project that gets built.
4. Run the project in the iPhone X Simulator
5. Tap the button to play your animation

What’s Different?

The custom button export for iOS is a little different from the standard iOS option. First, selecting the button will play your button forward and deselecting will play it backwards.

This step starts at 0:45

Yes, that’s right. It’s possible for you to play your animations in reverse.

Aside from that, there’s a couple of files that set this option apart.

• ToggleButton.swift is a subclass of UIButton that can handle animations from Flow.
• LikeTimelineButton.swift is a subclass of ToggleButton that handles your specific animation.

Then, your animation’s playback is tied to a user clicking the button in the simulator.

Flowcase

This is a sample app, designed to be similar to what you might find out there in the real world (i.e. from both design and software perspectives).

This step starts at 1:37

This is what the app looks like in the simulator.

As you can see it has a card layout, and internally is structured using standard iOS programming approaches.

Integrate

Now it’s time to integrate our exported button into the Flowcase app.

This step starts at 2:10

1. Open both projects in Xcode and get them side by side.

Copy FlowCommon

First, we need to copy a few files from our exported project into Flowcase.

This step starts at 2:21

1. In Flowcase, create a new group it FlowCommon.
2. In LikeButton, select all the files in FlowCommon.
3. Drag them into the new folder in Flowcase.
4. Make sure the Copy Items if Needed and “Add to Targets options are selected.

Copy Your Animation Files

We’ll do the same steps as before, but this time for your animation code.

This step starts at 3:03

1. In Flowcase, create a new group called LikeButton.
2. In LikeTimeline, select the LikeTimeline, UnlikeView, ToggleButton and the LikeTimelineButton files.
3. Drag them into the new folder in Flowcase.
4. Make sure the Copy Items if Needed and “Add to Targets options are selected.
5. Build the project (⌘B) to make sure all the code compiles.
6. Close the LikeTimeline project.

Change the Old Heart

In Flowcase, the current heart button is a UIButton. What we want to do it change it to the custom one we just ported over.

This step starts at 3:56

1. Open the Main.storyboard file, found in the Resources folder.
2. Select the heart button.
3. In the Identity Inspector change the button’s class to LikeTimelineButton.
4. Switch to the Attributes Inspector
5. Delete the likeIconOff variable from the Image property.
6. Change the State Config to selected.
7. Delete the likeIconOn variable from the Image property.
8. Save the project.

Change the FeedCelll

Flowcase uses a UICollectionView to manage displaying the cards, and this class relies on the FeedCell class to layout individual cards. We need to modify this class.

This step starts at 5:02

1. Open the FeedCell class.
2. Add ToggleButtonDelegate to the class definition… It should look like this:

   class FeedCell: UICollectionViewCell, ToggleButtonDelegate {
   

3. Change the likeButton variable’s type to LikeTimelineButton… It should look like this:

   @IBOutlet weak var likeButton: LikeButtonTimelineButton!
   

4. In awakeFromNib() add…

   likeButton.delegate = self
   

5. Delete the entire first line inside the createButtonTargets method… It should look like this:

   func createButtonTargets() {
    webButton.addTarget(self, action: #selector(launchWeb(sender:)), for: UIControl.Event.touchUpInside)
   }
   

6. Add the following method to the class:

   func didToggle(sender: ToggleButton) {
     data.liked = sender.isSelected
     delegate.likeStatusChanged(cell: self)
   }
   

7. Delete the entire toggleLikeButton(sender: UIButton) method, including the @objc above it.

Done.

Tadaaaa!

Now your project has a new custom button in it that plays the animation you made in Flow.

Check out the animation in the final app at: 7:03

Even though we had to do a little bit of code work, the effort to get an animation into something that’s working is nigh on zero.

Go show your devs how easy this is!

That’s It!

You’ve successfully gotten through our onboarding series. If you’ve followed along, not only have you learned to use Flow, but also these critical ideas:

• Formatting your design file is important (even if you’re not using Flow)
• Cleaning up your artboard structure implies your intention with what to animate.
• Animating in Flow is quick and easy.
• There are many ways to export your animations to code.
• Integrating custom components into real projects is very simple and straightforward.

We are planning to add a couple of advanced tutorials around this series, so stay tuned for them.