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 intuitive.
Yet, creating them can be troublesome and the two questions we keep coming back to are:
- What do you use to author the asset?
- What format does an iOS or Android developer need?
At Mobiddiction, we’ve tried a few combinations and will take you through our workflow.
This tutorial requires the following software:
- After Effects
- Lottie from Airbnb
In this tutorial, we’ll take you through setting up Lottie inside After Effects and Xcode. Creating and exporting vector assets from Sketch. Animating and exporting them from After Effects. Finally, creating the Xcode project and building 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:
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).
The best way to install the extension is on the Bodymovin GitHub page:
- 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:
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 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:
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.
To make sure you have it installed, run Terminal and enter this command:
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 in Terminal:
When everything installs we can move onto Xcode. If you get an error you can follow some of the solutions provided in the CocoaPods troubleshooting guide:
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:
This create a pod file in the same directory as your Xcode project. Open it with your favourite text editor and enter:
Your file should look like this:
Save this file, go back to Terminal and enter this command:
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:
- Create an After Effects animation with vectors created in Sketch
- Bodymovin to export into a JSON file
- Bring this JSON file into Xcode and implement 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.
The screencasts that follow have no music so you can listen to your own tracks and not get interrupted. Enjoy.
The final art-board in the 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 up, how to get the shapes in Sketch into After Effects.
- 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 another 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 to 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.
We exported 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 setup a swipe controller and it’s 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:
Good luck and have fun.
The team at Mobiddiction.