Implementing Lottie Animations in your .NET MAUI application
Animations add to the décor of a mobile app and bring life into the design. If you’ve been using animations for quite a while, you probably already know about Lottie animations.
Lottie is a mobile library for Android and iOS that parses Adobe After Effects animations exported as JSON.
There are plenty of cool animations that you may find on their website:
In this article, you’ll learn how to add Lottie animations to your .NET MAUI application and make your apps even more beautiful!
Let’s get started.
Install Nuget
In your .NET MAUI project, install SkiaSharp.Extended.UI.Maui by Microsoft. You’ll need version 2.0.0-preview.59, which is currently in pre-release (as of this writing), so please check “Include prerelease”:
Bootstrap SkiaSharp plugin
Next, go into your MauiProgram and add UseSkiaSharp() to the app builder. Otherwise, you will get a runtime exception.
Add Lottie JSON file
Now, let’s start adding animation file to your .NET MAUI project. Go to Resources folder then right-click on the Raw folder. Select Add then Existing Item.
Select your JSON file. Click Add.
Display Animation
In your XAML file, add XML namespace for SkiaSharp.Extended.UI.Controls.
We’re going to use SKLottieView. This is an animated view that can playback Lottie files.
Change the Source to whatever your JSON file name is.
Set the RepeatCount to -1 to repeat the animation until infinity. If you set that to 5, the animation is going to repeat 5 times. You can also set it to 0, then it’s not going to repeat and just going to play once.
Several properties can be used to control the animation playback. Check out the full documentation here.
Here’s how it looks on Windows machine and Android when running:
Well, that is all needed to add cool Lottie animations to your .NET MAUI application!
You can find the source code example on my GitHub.
