For a new version of the Have I Been Pwned app (read more on that here) I finally found myself a chance to use Lottie for the first time. With Lottie you can load awesome animations into your app in a matter of minutes!

The sample code associated with this post can be found here: https://github.com/jfversluis/LottieSample

Note: the sample has been updated since this blog post, for the most recent method, check out the video below.

Want to see how to use Lottie in a video? Check out this one!

What is Lottie? #

The Lottie library is created by the developers of Airbnb, mainly to overcome the large image files and hard code that is normally needed when wanting to use animations. Read the full story here.

Lottie was initially made available for iOS, Android and React Native, but on account of the great effort of Martijn van Dijk all these goodies are now available on Xamarin and Xamarin.Forms as well. You can find the repository on GitHub.

How to use Lottie in your Xamarin app #

In this post we will have a look at how we can use these Lottie animations in our app. While I will be showing it by the means of a Xamarin.Forms app, you can also use it in traditional Xamarin apps or even Apple TV and Mac OS applications.

Where to find animations? #

A great resource to find stock animations is a site called LottieFiles. There are a great deal of prebuilt animations for you to use. Just make sure that you do not forget to give credits where credits are due.

If you need a custom animation, Fiverr is a great resource if you want to hire a designer to create a custom animation. Because, face it, most of us are coders, not designers.

The conversion from a After Effects file to a JSON file is done through a plugin which is called Bodymovin and can be found here. There are a number of ways to install it, it shouldn’t be to hard to figure out. The conversion is then pretty easy, if you do need a push in the right direction, watch this video. But note; too complex animations tend not to work that great (yet).

Installing Lottie into your app #

I have just created a File > New app in Visual Studio for Mac, which I will be using to demonstrate this. After your project has loaded, install the Com.Airbnb.Xamarin.Forms.Lottie files on all of your projects. This is needed because it is implemented using custom renderers on the platform projects.

After you have installed the required packages, showing an animation is pretty straight-forward. Add the Lottie namespace to the root of the page and start using the AnimationView that will be used to show the animation. The code for this is underneath.

To initialize the platform-specific code for iOS, also make sure to include:

AnimationViewRenderer.Init();

in your AppDelegate.cs’s FinishedLaunching method. For Android, you do not need any additional code.

The only thing we need now is an actual animation! I have taken one from Lottie files, namely this one: https://www.lottiefiles.com/427-happy-birthday. Some of these files include the .eap source file, so you can make edits to it if you want to. But the thing we are after is the .json file. Add this file to your iOS and Android project as a BundleResource (in the Resources folder) or AndroidAsset (in the Assets folder) respectively.

The AnimationView has several options which can be used to show the animation. Below, you can see the extended example of the code above. Like any other control you can give it a x:Name property to refer to it from the code-behind. The Animation property, specifies the filename of the .json file that you want to use.

Then with the AutoPlay and Loop properties, you can specify if you want the animation to start playing whenever it is shown and from there loop or just play once. It also has events for when the animation has started, paused and you can start playing it from code, etc. In the sample code on the Github repository I have implemented a few of these features.

When running this code, we will see the (awesome) result below.

Lottie Animation in action

While the above example is for iOS, on Android this works just as well!

In closing #

I hope you are just as excited as I am about this great library! Without having to pick up animation API’s, you can still add great animations to your app. There is still some things I’d like to see fixed in the Lottie library, but it is of to a great start.

The repo with example code is found on Github: https://github.com/jfversluis/LottieSample. Don’t be shy to show me your fabulous projects enriched with great animations.