HOW TO … build native app animations in Xcode

Animated icons and illustrations in native app on-boarding screens are becoming more popular. They visually delight the user and also help make the experience more interactive.

 

 

 

But building them can be a nightmare with the same two questions always propping up:

• What do you use to author the asset?
• What format does an iOS or Android developer actually need to build?

Team Mobi has tried a few combinations which we wanted to share with you,

Note, this how to guide will require the following software:

• Sketch
• After Effects
• Lottie from Airbnb
• XCode

This guide will help you:

• Set up Lottie inside After Effects and Xcode.
• Create and export vector assets from Sketch.
• Animate and export assets from After Effects.
• Create the Xcode project and build a working prototype.

Here’s what we’ll be making:

 

01. Setup Lottie

Getting everything working is a good place to start.

First up, go to the Lottie site:

http://airbnb.design/lottie/

Scroll down and follow the links to Bodymovin (the extension you install in After Effects) and the iOS Integration page (that shows you how to setup the Lottie library in Xcode).

 

Install Bodymovin

The best way to install the extension is on the Bodymovin GitHub page:

https://github.com/bodymovin/bodymovin

• Download the ZIP from the repo;
• Extract content and get the .zxp file from ‘/build/extension’;
• Use the ZXP installer from aescripts.com.

Once you’ve downloaded these, you can bring the extension over to your desktop (you can find it here):

bodymovin-master/build/extension/bodymovin.zxp

Open “ZXP Installer.app” and drag the the extension into it.

 

 

Open After Effects and make sure the extension has been installed. You should see this:

 

 

Select Bodymovin and if everything went well, you’ll be able to see the Bodymovin window. We’ll come back to this later in the tutorial as we get ready to export our animation.

 

 

In the menu, go to:

After Effects CC/Preferences/General

Make sure “Allow scripts to Write Files and Access Network” is checked.

Install Lottie in Xcode

Visit the Lottie iOS GitHub repo here:

https://github.com/airbnb/lottie-ios

You’ll notice in the “Setup Lottie” section that the first thing you have to run is a Terminal command. We tried this and nothing happened and here’s why: Lottie requires “CocoaPods”, a dependency manager for Swift and Objective-C Cocoa projects.

Setup CocoaPods

To make sure you have it installed, run Terminal and enter this command:

pod --version

If you get an error, you’ll have to install CocoaPods on your system. You can do this by opening Terminal and entering this command:

sudo gem install cocoapods

Next, you need to setup the CocoaPods master repo by running this command:

pod setup

When everything installs we can move on to Xcode. If you get an error you can follow some of the solutions provided in the CocoaPods troubleshooting guide:

https://guides.cocoapods.org/using/troubleshooting.html

We’ll park CocoaPods for now and move onto Xcode.

Create an Xcode Project

Open Xcode and create a new “iOS/Single View” project:

 

 

We’ve saved ours on the desktop in this folder structure (you can save yours where ever you like):

Mobiddiction Lottie Tutorial/Xcode/MobiddictionLottieTutorial/MobiddictionLottieTutorial.xcodeproj

Install Pod File

Close this project and install it’s pod file opening Terminal, changing the directory to the Xcode projects directory by running this command (change the path to your path in this instance):

cd /Users/yourusername/Desktop/Mobiddiction\ Lottie\ Tutorial/Xcode/MobiddictionLottieTutorial

Then run this command:

pod init

This create a pod file in the same directory as your Xcode project. Open it with your favourite text editor and enter:

pod ‘lottie-ios’

Your file should look like this:

 

 

Save this file, go back to Terminal and enter this command:

pod install

Again, if you don’t receive any errors you are now ready to start using Lottie inside Xcode.

Here’s what we’ll be doing next:

• Creating an After Effects animation with vectors created in Sketch;
• Bodymovin to export into a JSON file;
• Bringing this JSON file into Xcode and implementing it with some Swift code.

02. Sketch file

Our Sketch file contains 4 art-boards and their shapes – beacon, smartwatch, mobile and our logo. Here’s a screencast that shows you how to setup an art-board, add a coloured background rectangle and start drawing out it’s shape. We’ve removed the audio so you can listen to your own soundtrack of choice.

 

 

The final art-board has 2 states of the Mobiddiction logo and you’ll find out why once we bring it into After Effects.

 

 

03. After Effects animation

Start setting up your After Effects file.

This screencast takes us through:

• Creating a composition at 375px x 667px (25 fps);
• Adding a shape layer for the background.

 

 

Next:

• Export the shapes you’ve created in Sketch as .EPS files;
• Bring them into After Effects and convert them to editable paths (clean up these paths).

 

 

Create the shape morph and tweak the timeline:

• Add another shape layer that we’ll use to morph between these shapes, add path and fill modifiers to it so we can see it;
• Keyframe each icon’s path and copy them over to the shape layer we’ll use to morph between each icon;
• Tweak keyframe interpolation until the first 4 icons morph from one to the other smoothly, add 180° clockwise rotation to each icon morph to give it character;
• Make the background colour change with each shape morph.

 

 

One of the last things we have to do in After Effects is transition from the last shape to our logo icon:

• Add a null then parent our icon to it;
• Pop this in as the shape that precedes it pops out of view;
• Export the completed animation with BodyMovin.

 

 

Export the JSON file to this path and name:

Desktop/Mobiddiction Lottie Tutorial/Xcode/MobiddictionLottieTutorial/MD Logo Animation.json

04. Xcode file

We’re going to stop here and bring where we are into XCode. There will be an update to this tutorial that adds more flourishes at the end frame and gets it running in Android Studio. For now, we have all we need to make working prototype:

• Open the Xcode workspace file you created earlier in this tutorial;
• Drag the JSON file into Xcode as an asset;
• Write the code needed to loop it;
• Test on an iPhone 7 emulator.

 

 

To create the on-boarding version we’ll set up a swipe controller and a code to swipe between each icon morph.

We’ll skip to the end result and provide you the code we’ve just written in both examples in the source files.

Your final Xcode screen and it’s working prototype should look like this:

 

Congratulations, you’re done!

 

Here’s the source files for this project, they can help you create your own projects and teach you how to reproduce this tutorial.