[.NET MAUI] Lottie 파일 적용하기

Xamarin 에서 Lottie 를 정말 유용하게 사용했다.
json 형태의 Lottie 파일을 가지고 움직이는 이미지를 사용할 수 있다
(특히 제한적이지만 편집도 가능해서 색상등을 변경하여 적용할 수도 있다.)

MAUI 에서 사용방법을 알아보자

MAUI 프로젝트를 만들고 Nuget Package 중에 SkiaSharp.Extended.UI.Maui 을 찾아 설치한다.
(시험판 포함 을 체크해야 보인다.)

설치 후 MauiProgram.cs 에 아래와 같이 .UseSkiaSharp() 을 추가한다.

using SkiaSharp.Views.Maui.Controls.Hosting;

namespace Maui.LottieTest
{
    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();
        }
    }
}

사용될 Lottie 파일을 다운받자 (아래는 다운받은 사이트와 파일)
https://lottiefiles.com/110955-rocket-launch-animation-space-exploration

rocket.json

0.05MB

 

프로젝트의 Resources 폴더의 Raw 폴더에 위 파일을 추가한다.

MainPage.xaml 에 아래처럼 코딩한다.

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:skia="clr-namespace:SkiaSharp.Extended.UI.Controls;assembly=SkiaSharp.Extended.UI"
             x:Class="Maui.LottieTest.MainPage">

    <ScrollView>
        <VerticalStackLayout
            Spacing="25"
            Padding="30,0"
            VerticalOptions="Center">

            <skia:SKLottieView
                Source="rocket.json"
                HeightRequest="200"
                WidthRequest="200"
                RepeatCount="-1"
                HorizontalOptions="Center" />
            
        </VerticalStackLayout>
    </ScrollView>

</ContentPage>

주의할건 SKLottieView 에 반드시 HeightRequest, WidthRequest 가 설정되어야한다.

실행결과

* 참고로 AppShell 은 제거 하고 App.xaml.cs 에서 MainPage = new MainPage(); 로 처리했다.

[Source]
https://github.com/kei-soft/KJunBlog/tree/master/Maui.LottieTest

GitHub - kei-soft/KJunBlog

[Youtube]