Lottie Windows

Lottie-Windows

Lottie-Windows ist eine Bibliothek, um Adobe After Effects-Animationen in Ihrer Anwendung nativ zu machen. Dieses Projekt fügt Windows zur Lottie -Familie von Tools hinzu, die auch auf Android, iOS und Web abzielen.

Lottie vereinfacht den Design-to-Code-Workflow, um Ihre Windows-Anwendungen ansprechende, interaktive Vektoranimationen mit erheblichen Verbesserungen in Bezug auf Leistung, Qualität und technische Effizienz gegenüber traditionellen Ansätzen wie GIFs, manuell codierten Animationen usw. Lottie-Windows verwenden.

Lottie-Windows besteht aus 3 verwandten Produkten:

• Lottie-Windows- Bibliothek zum Parsen und Übersetzen von BodyMovin JSON-Dateien
• LOTTIGEND -Befehlszeilen-Tool zum Generieren von C# oder C ++-Code, die anstelle von JSON verwendet werden sollen
• Lottie Viewer -Anwendung zur Vorschau von JSON und auch Code generieren

Dieses Repo enthält auch Quellcode für Beispiele .

Schneller Start

Es gibt zwei Optionen, um Lottie -Animationen in Ihr Winui 3- oder UWP -Projekt zu integrieren.

Option Nr. 1, verwenden Sie Dynamic Loader

1. Installieren Sie CommunityToolkit.WinUI.Lottie Nuget -Paket für das Winui -Projekt (oder CommunityToolkit.Uwp.Lottie für UWP -Projekt).
2. Wenn Sie C# verwenden, müssen Sie möglicherweise auch Microsoft.Graphics.Win2D (Version 1.0.5 oder unten) für das Winui -Projekt (oder Win2D.uwp und Microsoft.UI.Xaml für UWP -Projekt) installieren.
3. In Ihrer .xaml -Markup -Datei fügen Sie hinzu:

       ...
       xmlns:lottie="using:CommunityToolkit.WinUI.Lottie"
       ...
       < AnimatedVisualPlayer >
           < lottie : LottieVisualSource UriSource = " <asset path or web link to a json file> " />
       </ AnimatedVisualPlayer >

   oder für UWP -Projekt:

       ...
       xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
       xmlns:lottie="using:CommunityToolkit.Uwp.Lottie"
       ...
       < muxc : AnimatedVisualPlayer >
           < lottie : LottieVisualSource UriSource = " <asset path or web link to a json file> " />
       </ muxc : AnimatedVisualPlayer >

Option Nr. 2, mithilfe von CodeGen (empfohlen)

1. Installieren Sie das Codegen -Tool mit dotnet tool install lottiegen
2. Führen Sie das Codegen -Tool lottiegen -InputFile MyAnimation.json -Language cs -WinUIVersion 3 aus
   • Verwenden Sie für UWP -Projekte -WinUIVersion 2.X je nach Version von Microsoft.UI.Xaml
   • Andere Sprachoptionen: cppwinrt und cppcx
3. Fügen Sie dem Projekt generierte Quelldateien hinzu
4. Installieren Sie bei Bedarf Pakete aus Schritt 2 von Option Nr. 1.
5. In Ihrer .xaml -Markup -Datei fügen Sie hinzu:

       ...
       xmlns:animatedvisuals="using:AnimatedVisuals"
       ...
       < AnimatedVisualPlayer >
           < animatedvisuals : MyAnimation />
       </ AnimatedVisualPlayer >

   oder für UWP -Projekt:

       ...
       xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
       xmlns:animatedvisuals="using:AnimatedVisuals"
       ...
       < muxc : AnimatedVisualPlayer >
           < animatedvisuals : MyAnimation />
       </ muxc : AnimatedVisualPlayer >

Unterstützte SDKs

• Mai 2019 Update (18362) und später

Dokumentation

• Dokumentation und Tutorials
• Lottie -Proben
• Lottie Viewer

Status erstellen

Paket	Zweig	Status	Neueste Nuget -Version
CommunityToolkit.winui.lottie	hauptsächlich
CommunityToolkit.UWP.Lottie	hauptsächlich
Lottiegen	hauptsächlich

Feedback und Anfragen

Bitte verwenden Sie GitHub -Probleme für Fehlerberichte und Feature -Anfragen.

Prinzipien

Dieses Projekt hat den vom Mitwirkenden Covenant definierten Verhaltenskodex übernommen, um das erwartete Verhalten in unserer Community zu klären. Weitere Informationen finden Sie im Verhaltenskodex der .Net Foundation.

.NET Foundation

Dieses Projekt wird von der .NET Foundation unterstützt.