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

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.

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

Related Posts

Leave A Comment?