Bring Stunning Animations to Your Apps with Lottie

Guest Blogger

This is a special guest post on Lottie by Airbnb, written by Martijn van Dijk.

Martijn works at Xablu as a Xamarin consultant. You can find him on Twitter at @mhvdijk and on Github at @Martijn00.

Animations are always a delight to have in our apps, but they can also be very difficult to create. Taking an animation that a designer has created and turning it into platform-specific code is both tedious and prone to error. Lottie is a mobile animations library created by Airbnb for iOS and Android that parses Adobe After Effects animations (exported as JSON) and renders them using native animation APIs. With Lottie, for the first time designers can create and ship beautiful animations without an engineer painstakingly recreating it by hand. Since it is backed by JSON, the animations are extremely small in size, but can be large in complexity! Animations can be played, resized, looped, sped up, slowed down, and even interactively scrubbed.

Because it’s so easy to integrate fancy animations, but also to update and maintain them, we’ve begun using Lottie for animations in all my mobile apps. Lottie has several features built into its API to make it more versatile and efficient. It supports loading JSON files over the network, has an optional caching mechanism, and animations can be driven by gestures. In this blog post, you’ll learn how to use the Lottie animation framework to create beautiful animations for iOS, Android, even Xamarin.Forms apps!

Adding Beautiful Animations with Lottie

Before we get to the code, first we have to create our animation. Lottie functions using JSON exported from Adobe After Effects and translates this into native animations for us. To begin, create an animation in Adobe After Effects. Next, use the bodymovin plugin for After Effects to export the animation as JSON. This will serve as the backing store for the animations that Lottie will load from code.

Now it’s time to add the animations to our mobile apps. Lottie for Xamarin is distributed via NuGet. To use Lottie in your apps, simply add the iOS, Android, or Xamarin.Forms version of the Lottie package to your project(s).

Android

Lottie supports Jellybean (API 16) and above. The simplest way to use it is with LottieAnimationView:

Alternatively, you can load the animation programmatically from a JSON located in the Assets directory:

LottieAnimationView animationView = FindViewById(Resource.Id.animation_view);
animationView.SetAnimation("hello-world.json");
animationView.Loop = true;

iOS

Create an animation from code with the LAAnimationView, add the animation to the view, and call PlayWithCompletion:

LAAnimationView animation = LAAnimationView.AnimationNamed("LottieLogo1");
this.View.AddSubview(animation);
animation.PlayWithCompletion((animationFinished) => {
  // Do Something
});

You can also load it programmatically (locally or over the network) from a NSUrl:

LAAnimationView animation = new LAAnimationView(new NSUrl(url));
this.View.AddSubview(animation);

Xamarin.Forms

Lottie has an API available for Xamarin.Forms too, with it’s own XAML markup:

Download the Sample App

To view examples of prebuilt animations, download the Lottie sample app from GitHub or get it directly from the Google Play Store.

It won’t be too long before you are creating delightful animations for your users with Lottie!

Learn More

There’s a lot more to Lottie and binding native libraries for Xamarin. You can find out more about Lottie for Xamarin in the README file on GitHub. For more information, troubleshooting, and samples on creating bindings, look at the Android and iOS documentation. Join me in the open source effort and contribute on Github!

Guest Blogger

Follow