The Design Guide to Winning Developers’ Hearts . Part 1, Use Lottie
This post is the first in a series on better workflow processes between designers and developers.
Animations are powerful
They can inject life into a mundane loading screen or give personality to a drab on-boarding experience. The difference between a confused user and an empowered user can very well be a well designed animation.
But the process of implementing animations in apps can often be slow and tedious. A typical workflow involves designers handing off .mov files of their animations to engineers who then need to recreate it natively in code. Engineers tediously eyeball timing, movements and transformations until the animation looks just right. Making trivial changes to animations would mean going through this whole process again and again.
When the team at Airbnb released their animation framework, Lottie, we were immediately intrigued. They created Lottie as a way to quickly and accurately convert designer’s After Effects animations into native code. With Lottie, engineers can be sure that their designer’s intentions are realized with a few simple clicks.
Read more about why Airbnb created Lottie here and here.
What follows is a guide for how you can use Lottie to create some animation magic of your own. Give it a try, and we’re certain you’ll love it as much as we do!
The workflow basics
Designers export their AE animations to a JSON file using an extension called Bodymovin. Engineers then use Lottie to drop the animations directly into their applications from the JSON file provided.
Steps 1 and 2 below will walk designers through prepping their AE file for export with Bodymovin. Step 3 will show how engineers how to use Lottie in their iOS and Android projects.
Resources:
- Adobe After Effects
- Bodymovin
- Lottie for iOS or Android
Prep your animation in Adobe After Effects
There are some key things for designers to note when creating animations:
Expressions Are Not Supported (Yet)
Bodymovin will convert your expressions into its JSON file, but Lottie will not be able to read them. If you want to use an effect like bounce or inertia, you need to manually create those keyframes. Tons of other features are supported though (masks, transforming solids, parenting), so use those to your heart’s desire. See the full list of supported After Effects features here.
Convert your Ai files to vector
In your AE composition, convert any linked Illustrator layers into vectors. If not, Bodymovin will export these layers as PNGs which may look pixelated if scaled up.
Convert your text layers to shapes
Similar to the above, Bodymovin will not export your text layers unless they are shapes.
Enable scripts
You must give scripts like Bodymovin permission to look at your AE file and export out files.
Go into your General Preferences (After Effects/Preferences/General) and check the “Allow Scripts to Write Files and Access Network” box.
Export with Bodymovin
Download
Download the Bodymovin extension. There are multiple ways to get the extension, but the path of least resistance is downloading the .zxp file through AE Scripts. You’ll need to use the ZXP installer to install it on your computer.
If that doesn’t work, Bodymovin has a list of different ways to download the file.
Restart AE and Open Bodymovin
You’ll find Bodymovin in your Window/Extensions menu.
Export
The Bodymovin window looks like this:
Choose the composition you want to export from the list by clicking the bubble to the left of the composition name. Choose a destination folder for the JSON file.
It’s helpful to go into the Settings gear and check the “Demo” option. This will export an html file so you can double check to make sure everything is behaving as it should.
Hit the green “Render” button and you’re done!
Navigate to your destination folder and find the exported JSON file that you’ll hand off to your engineering team.
Finish with Lottie
Now that the engineering team has the file, they can integrate with Lottie.
For iOS
Integrate the Framework
CocoaPods and Carthage are both supported. Depending on which dependency manager you’re using, you’ll need to specify Lottie in your Podfile or Cartfile and either run pod install or carthage update.
Add the JSON File to the Xcode Project
Open Xcode and select File > Add Files to… and select the animation’s JSON file from the finder window. Ensure “Copy files if needed” is checked.
Add a Lottie Animation View
Initialize an instance of LOTAnimationView, passing the name of the animation’s JSON file into the “name” parameter. Set the frame of your LOTAnimationView to the size and position that you intend to place the animation. Add your LOTAnimationView as a subview, and call play:completion: passing a completion handler to be called once the animation has completed playing. Alternatively, call “play” and “pause” to manually control the playback of the animation.
if let animationView = LOTAnimationView(name: "filename") {
animationView.frame = animationContainerView.frame
animationContainerView.addSubview(animationView)
animationView.loopAnimation = true
animationView.play(completion: { _ in })
}Animation Options
Loop Animation
Set loopAnimation to “true” in order to loop the animation continuously. Your animation will not loop by default.
Animation Speed
Set the speed of the animation playback by changing the value of animationSpeed on your animation view.
Animation Duration
Set the duration of the animation playback by changing the value of animationDuration on your animation view.
Build and Run
Compile your project and run it in a simulator or on a device. Navigate to your animation and make sure that you’ve configured your LOTAnimationView correctly.
For Android
You can find the GitHub repository here to read the documentation for Android integration.
Integrate the Framework
First, import the Gradle dependency to your project:
compile ‘com.airbnb.android:lottie:$versionNumber’
You can then play the animation two different ways. First, add a LottieAnimationView to your xml and then use the property “lottie_fileName” to reference your JSON file. For example:
<com.airbnb.lottie.LottieAnimationView
android:id="@+id/animation_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:lottie_fileName="hello-world.json"
/>For more flexibility, you can apply the animation programmatically like this:
LottieAnimationView animationView = (LottieAnimationView) findViewById(R.id.animation_view);
animationView.setAnimation("hello-world.json");
animationView.playAnimation();LottieAnimationView provides setters to customize the behavior of the animation.
Loop Animation
You can use the field app:lottie_loop=”true” to request looping of your animation in XML, or “animationView.loop(true);” in Java.
Other Solutions
There are other tools that help bridge the gap between AE animations and native code — Facebook’s Squall and Keyframes are great examples. And Quartzcode doesn’t need AE to create its animations.
We prefer the AE + Bodymovin + Lottie combo for four reasons:
- Both iOS and Android compatible (Squall is only iOS compatible).
- Wide breadth of supported AE features (Keyframes have limited supported features).
- Ease of use (we found Quartzcode to be a bit buggy).
- The team at Airbnb is constantly updating Lottie with new features, including the ability to change animation properties (like color) and creating custom ViewController transitions. Cool!
All these tools are all meant to facilitate and enhance the design to dev workflow. The tools allow designers and devs to implement animations quickly and accurately. They are powerful, collaborative solutions that help us create better experiences for our users. Each have their own strengths and limitations, and we encourage you to check out each one to see what fits your needs.
This article was originally posted on the Prolific Interactive blog. It was co-written by Phill Farrugia with contributions from Quentin Colle.
