Lottie Animations with Xamarin Forms

Lottie is a library, designed for iOS, Android and React Native, by Airbnb, that allows you run animations. These animations are defined in a JSON file, containing all the details of colors, shapes, transforms and more. These JSON files are created by Adobe After Effects. However, many designers have been happy to share their works, and you can access pre-built animations at LottieFiles.

If you want to see a working Xamarin Forms example, please look at my github repo LottieAnimationSample.

While this library was originally designed for native iOS and Android, Xamarin.Android, Xamarin.iOS and Xamarin Forms packages were made, by Martijn, a very talented and active member of the Xamarin community.

Setup

To get started, first install the following Nuget package to your native and portable projects.

Install-Package Com.Airbnb.Xamarin.Forms.Lottie

In your native projects, after the Xamarin.Forms.Forms.Init line, add the following, into each project.

AnimationViewRenderer.Init();

Show Animation

In order to show an animation, you first need the after effects JSON file. Put this in your Assets (Android) or Resources (iOS) folder. Have a look at my sample, or go to LottieFiles for a sample JSON file, if you don’t have one already.

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:forms="clr-namespace:Lottie.Forms;assembly=Lottie.Forms"
             x:Class="LottieAnimationSample.MainPage">

    <forms:AnimationView x:Name="AnimationView"
                         Animation="LottieLogo1.json"
                         Loop="True"
                         AutoPlay="True"
                         VerticalOptions="FillAndExpand"
                         HorizontalOptions="FillAndExpand" />
</ContentPage>

And that’s all you need. It also has a property IsPlaying that you can switch on and off as needed to start and stop the animation.

Animating Xamarin Forms Elements

What if you want to animate a button on Xamarin Forms? Well Lottie isn’t designed for this. It shows an animation, but doesn’t do an animation on existing elements. If you wanted to perform an animation on an existing Xamarin Forms element, you will still need to use their inbuilt Animation methods.

However, if you are doing a transition and you can get everything to line up correctly, then you can place an animation above an element, play its animation, then make it disappear, while changing the element in the background.

Learn More

For more information on the Xamarin Forms project, you can visit LottieXamarin. If you want to learn more about Lottie, have a look at the Airbnb Lottie Page. And finally, if you want to know more about After Effects, you can visit the Adobe After Effects Page.


XAMARIN.FORMS MONTHLY NEWSLETTER

JOIN 1,200+ SUBSCRIBERS

  1. Don't miss out on updates
  2. The latest info from this site, Xamarin and the community
  3. Unsubscribe at any time*

* We use MailChimp, with double opt-in, and instant unsubscribe

Microsoft MVP | Xamarin MVP | Xamarin Certified Developer |
Exrin MVVM Framework | Xamarin Forms Developer | Melbourne, Australia

Related Posts

9 Comments

  1. Cíntia

    Please, can you help me? I try create a new project, try to use your project and the project from lottie repository, but doesnt work, I always get a white screen. Tried different json files and the result is the same. I use 2017 Enterprise version of Visual Studio.

    Thank you 🙂

  2. Danilo

    I have the same issue Sarah has. I tried and nothing never works, always the white screen. This doesnt work on Android or IOS, do you know why? I have Visual Studio 2015 Community (sorry my bad english)

    1. Adam Pedley

      Unless you provide some more information, I wouldn’t know what is wrong. I just downloaded my sample again, and it runs as expected. I did try it on Android 6.0 and 7.1 and both worked. Are there any errors or information that looks odd, in the Output window that might give a clue?

      1. Danilo

        I dont know what is happening. I tried your project, but I have only the white screen. There is no problem with my VS or emulator, because any other project works fine.

        I have no errors or warnings on my VS.

        This image shows my emulator trying run a lottie project.

        1. Adam Pedley

          Sorry, I’m kind of stumped to what the issue might be. With the sample project, I can run that on the Android emulator. I have VS 2017 enterprise, but so does Cintia. I have the latest Xamarin release.

          I suppose you could try to do it via code behind and see if that makes any difference.

          Otherwise, you might need to open logcat, and see what messages the Android emulator is sending back. Maybe there is a graphics error occuring?

  3. Robin-Manuel Thiel

    You forgot to mention, that the `AnimationView` has to be initialized on every platform using `AnimationViewRenderer.Init();`. Especially on iOS, missing this out prevents the control from working.