.NET MAUI - Displaying Lottie Animations

Introduction

One of the most popular file formats for animations in mobile apps is the one produced by Adobe After Effects. This file format is a specialized JSON format containing the design for animations. Several libraries exist to render this kind of animations, and the most popular is Lottie, created by AirBnB. If you have worked with Lottie files in Xamarin.Forms, you might know that a Lottie implementation was available. In .NET MAUI, support for Lottie animations is included in the SkiaSharp graphic library, backed by Microsoft. In this article, you will learn how to display Lottie animations in your .NET MAUI projects using the SkiaSharp library.

Creating a MAUI sample project

I assume you know how to create a .NET MAUI project in Visual Studio 2022. Create a new .NET MAUI App project and remove the auto-generated code about buttons and other views from the MainPage.xaml and MainPage.xaml.cs files. The SkiaSharp library that you need to display Lottie animations is available via NuGet, and it is called SkiaSharp.Extended.UI.Maui. Having that said, open the NuGet Package Manager user interface and search for the library as follows. You need to enable the Include prerelease flag because, in this writing, support for MAUI is not yet in production. The following figure shows how the library appears in NuGet.

 

The SkiaSharp library exposes a specific view that is very easy to use, but you need some sample animations before using it. 

Adding Lottie animations to the project

The way your app consumes Lottie animations depends on the source of the animations themselves. If you have JSON files, you will add them to the Resources\Raw subfolder of the .NET MAUI project. If Lottie animations are instead hosted on a web server, the animation can be simply consumed by passing its URI to the Lottie view. A very nice and popular source for Lottie animation is the Lottiefiles.com website. On this site, you can find free and paid animations, illustrations, icons, and more. For the current example, I will use the JSON animation in the Lottie library repository, which is already included in the companion code for your convenience. Obviously, you can use a different animation.

Displaying Lottie animations

The SkiaSharp library provides a new view called SKLottieView. Before you can use it in your XAML, you need to add the following XML namespace declaration at the ContentPage level:

xmlns:skia="clr-namespace:SkiaSharp.Extended.UI.Controls;assembly=SkiaSharp.Extended.UI"

The SKLottieView can be declared as follows:

<skia:SKLottieView HorizontalOptions="FillAndExpand"
    Source="lottielogo.json"
    RepeatCount="3" RepeatMode="Restart"
    VerticalOptions="FillAndExpand" />

The Source property specifies the animation file, which can be local or remote. In this example, the animation will restart (RepeatMode) three times (RepeatCount). RepeatMode can also be set with Reverse, whereas RepeatCount can be assigned with -1 if you want the animation to be played just once. If you run the sample app, you will see the Lottie animation playing on your device. Before running the application, you need to add the UseSkiaSharp method invocation in the CreateAppBuilder method of the MauiProgram.cs file as follows:

var builder = MauiApp.CreateBuilder();
builder.UseMauiApp < App > ().UseSkiaSharp().ConfigureFonts(fonts => {
    fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
    fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
});

You can now run the sample app and see the Lottie animation being played, as demonstrated in the following figure.

Conclusions

Lottie animations are a trendy way to enrich the user interface of your cross-platform projects, and in .NET MAUI, this is very easy to accomplish via the SkiaSharp library.