Animation in .net MAUI

 Animation will add more good looking UI of the mobile application. Let's see how to add animation using lottie file.

Lottie is a mobile library for andriod and IOS that prases Adobe After Effects animations exported as JSON.

Lottie Animation in .NetMaui

You can go through the lottie website. This lottie provide pently of cool animation and also you can create own animation.

Please, support my blog by clicking on our sponsors ad!

Let's get started

First add install "SkiaSharp.Extended.UI.MAUI" in your project using nugget manager. This nugget is prerelease so please check "Include Prerelease".

Lottie animation in .net Maui

Next step is to Bootstrap Skiasharp plugin in MAUIProgram file and add UseSkiaSharp() to the app builder. 

Below is the code:

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

                return builder.Build();
            }
        }  

Add lottie json file in raw folder.

Lottie Animation in .net MAUI

To Display animation in your app, below is the code:

   <ContentPage xmlns = "http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MauiLottieDemo.MainPage"
             xmlns:skia="clr-namespace:SkiaSharp.Extended.UI.Controls;assembly=SkiaSharp.Extended.UI">
             
              <skia:SKLottieView
                  Source = "Data.json"
                  RepeatCount="-1"
                  HeightRequest="200"
                  WidthRequest="200"
                  HorizontalOptions="Center" />    
      </ContentPage>  

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.

I hope you this is helpful to you, please share your feedback in comment section.