How to create Lottie animations for Xamarin
“Surprise and delight.” That phrase is uttered often around here, especially among our design team. We always strive to add surprise and delight to our projects — little details that make an app not only useful, but delightful to use. A useful app will be installed, but a delightful app is one that users love, which helps make our clients’ apps stand out from the competition in the crowded app stores. We aim to take the ordinary user experience and make it extraordinary.
One of the go-to app design techniques that can add a little surprise and delight is animation. But in software development, poorly executed animations can also be a UX killer. Applied too often, animations can make an app file bloated and cause terrible performance. That’s not the kind of “surprise” we’re after.
Lottie makes animations easy
Enter Lottie. Simply put, Lottie allows us to easily create complex animations with minimal overhead so apps can be still be lightning fast. Developed by the design team at Airbnb, Lottie is a library for iOS, Android and React Native that renders Adobe After Effects animations in real time, allowing apps to use animations as easily as they use static images.
Since we started creating Lottie animations a year ago, it’s made everyone’s job better. Without it, I used to create animations using Adobe After Effects and then export them to a .gif file or a large .mpg. Those files would require developers to painstakingly recreate the animation using code, something that could take days. On some projects, to avoid the potential of poor performance and the additional development time/expense, we would simply avoid using complex animations.
But now with Lottie, it’s pretty easy to export an animation to JSON that can be read by the Lottie library and dynamically run in an app. No sluggish app performance. And an animation that would previously take a developer days to implement can now be done in minutes.
Lottie animations work great across platforms, too. Our Xamarin developers have successfully used Lottie on several client projects, published on both Android and iOS. Here’s how to create Lottie animations for Xamarin projects in four easy steps.
Step 1: Create the illustration
The first step of creating a Lottie animation is to come up with a concept and create a storyboard of events in the animation. The animation is then drawn in Adobe Illustrator, with all elements as separate layers. Below is an early illustration concept for an app for one of our travel industry clients. The concept is to show a guest in a “delightful” state of relaxation, resting in a hammock between palm trees.
Step 2: Build the animation
After the illustration is complete, the files are imported into Adobe After Effects so they can be animated. When using Lottie for animations, it’s important to keep everything outside of After Effects Compositions (a container that can store multiple layers of video, audio, and text). If you use Compositions, the export process to Lottie will fail because the library needs to be able to read each individual layer and element inside the animation. During the animation process, you’ll also need to use only supported effects that can be read by the Lottie library. Because we were using Xamarin for cross-platform Android and iOS apps, we also had to make sure to only use supported features on both platforms.
I tried different ways to reproduce a somewhat lifelike movement of the hammock, including creating a physical model of a hammock to simulate the motion. The hammock itself wasn’t a complex shape but the movement had to appear three dimensional, even though the animation only takes place in two dimensions.
Step 3: Export the animation for Lottie
With our After Effects animation ready and with all the layers and elements organized, we were ready to export our animation. The key: a useful plugin for Lottie called Bodymovin. Bodymovin exports an After Effects animation into a JSON file. The JSON file then is loaded into the Lottie library. For each animation, a different file is added to the library.
Step 4: Test the Lottie animation in preview apps
After exporting the animation file it’s time to test it. When you use Lottie with Xamarin, you need to use different preview apps. We used LottiePreview to test the animation for iOS, Android and the web. Here are the links for the test applications:
Once we verified the animation in the preview apps, our happy hammock character was ready to be integrated into the client application. Our Xamarin developers added the Lottie library to the project and it was compiled for iOS and Android.
Click or tap to see the animation.
Easy as 1-2-3, right? Well, no, never
Like using any tool for the first time, we learned many things during our early work with Lottie.
- When we first started, the supported features wasn’t as robust as it is now — so we saw some of our animations fail during testing. The takeaway is to consult the list of features early and often — and test all along the way.
- We found that different versions of Android behaved inconsistently. For example, the Merge Paths effect didn’t work in Kit-Kat but did work in more recent versions of Android. We found a workaround. You can enable Merge Paths in Kit-Kat by adding the following line of code:
enableMergePathsForKitKatAndAbove.
- Because Lottie is still pretty new, we’d recommend doing animation design and development in parallel. It’s crucial to identify issues with how the animation interfaces with the app early, so that you don’t encounter bigger problems later.
Surprise & delight
We saved a bunch of time by using Lottie with Xamarin, our preferred cross-platform development tool. But the best part? If we’d created this fairly complex animation as an .mpeg or .gif file, it would be between 1.5MB and 3MB. But when done as a Lottie JSON file, it was only 130KB.
That means our app will be that much faster, and that much more lovable.