Lottie Animationen in eine .NET MAUI App integrieren
Lesedauer: 2 Minuten

Bereits im Jahre 2018 habe ich hier in meinem Blog Lottie vorgestellt. Bei Lottie handelt es sich um eine Library aus der Feder von airbnb, welche Animationen nativ au zahlreichen Plattformen anzeigen möchten. Die Animationen lassen sich dabei bequem z.B. in After Effects erstellen und dann als JSON-Datei exportieren, die dann ganz einfach in verschiedene Apps integriert werden kann. Ich habe im im Jahre 2021 einen Blog-Post veröffentlicht, welche die Integration in Xamarin.Forms zeigt und nun ist es an der Zeit das ganze auch fĂŒr .NET MAUI umzusetzen.

ZunÀchst benötigen wir eine Animation, welche wir in unsere App integrieren wollen. Dazu öffnen wir die Webseite lottiefiles.com in einem beliebigen Browser.

Ihr könnt das Suchfeld benutzen, um eine passende Animation zu finden. Ich wĂŒrde gerne eine kleine Konfetti-Animation in meine App integrieren und daher suche ich nach confetti.

Ihr findet auf der Webseite nun Ergebnisse, welche mit einem PRO gekennzeichnet sind. Diese sind kostenpflichtig, aber es gibt meistens auch genĂŒgend kostenfreie Animationen. Wenn ihr eine passende Animation gefunden habt, könnt ihr diese öffnen.

Um die JSON-Datei herunterladen zu können, mĂŒsst ihr einen Account anlegen. Dies könnt ihr bequem ĂŒber Google, Facebook, GitHub oder klassisch ĂŒber Email erledigen.

Wenn ihr euch nun angemeldet habt, dann seht ihr die Option fĂŒr den Lottie JSON Download oder auch den Optimized Lottie JSON Download. Sucht euch eine der beiden Optionen aus und speichert die JSON-Datei mit einem passenden Namen ab.

Nun können wir Visual Studio öffnen und entweder eine bestehende .NET MAUI Applikation öffnen oder ein neues .NET MAUI Projekt anlegen. Anschließend mĂŒssen wir das NuGet Package SkiaSharp.Extended.UI.MAUI dem Projekt hinzufĂŒgen. Das Package liegt derzeit nur in einer Preview-Version vor, so ihr mĂŒsst das HĂ€kchen bei Include prerelease setzen, denn sonst könnt ihr das Package nicht finden.

Nun fĂŒgt ihr dem Ordner Resources/raw die JSON-Datei hinzu, die ihr vorab heruntergeladen habt. FĂŒr mich lautet die confetti.json und im folgenden Screenshot könnt ihr das Ergebnis sehen.

Nun können wir die MainPage.xaml-Datei öffnen und zunĂ€chst fĂŒgen wir den Namespace fĂŒr SkiaSharp hinzu.

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

Anschließend können wir das Control SKLottieView nutzen. In der Property Source mĂŒsst ihr einfach den Namen von eurer JSON-Datei angeben. Ebenso könnt ihr angeben, ob sich die Animation wiederholen soll oder z.B. nur einmal abgespielt werden soll. Eine Liste aller möglichen Properties findet ihr in der passenden Dokumentation.

<skia:SKLottieView HorizontalOptions="FillAndExpand"
                   Source="confetti.json"
                   RepeatCount="-1"
                   RepeatMode="Restart"
                   VerticalOptions="FillAndExpand" />

Stellt noch sicher, dass ihr gegebenenfalls euere Code-Behind-Datei bereinigt und anschließend können wir die App ausfĂŒhren. Der folgende Screenshot zeigt dabei die Windows-Version.

Aber natĂŒrlich funktioniert die Animation auch unter Android oder iOS.

Ich habe euch das vollstĂ€ndige Code-Beispiel auch auf GitHub abgelegt, so dass ihr dieses als Grundlage fĂŒr eure eigenen Umsetzungen. Ihr habt aber gesehen, dass das Integrieren von Animationen mit der Hilfe von Lottie recht einfach möglich ist.

RĂŒckblick: .NET MAUI Day 2024 MAUI-CHECK: Tool zur Einrichtung von .NET MAUI MAUI App Accelerator – Erweiterung, um MAUI Apps schneller entwickeln zu können