Lottie Windows

Windows de lottie

Lottie-Windows est une bibliothèque pour rendre les animations Adobe After Effects nativement dans votre application. Ce projet ajoute des fenêtres à la famille des outils Lottie ciblant également Android, iOS et Web.

Lottie simplifie le flux de travail de conception à code pour apporter des animations vectorielles interactives engageantes à vos applications Windows, avec des améliorations significatives en termes de performances, de qualité et d'ingénierie par rapport aux approches traditionnelles telles que les GIF, les animations codées manuellement, etc. Lottie-Windows utilise les API Vector Windows.UI.

Lottie-Windows se compose de 3 produits connexes:

• Bibliothèque Lottie-Windows pour analyser et traduire des fichiers BodyMovin JSON
• Outil de ligne de commande Lottiegen pour générer du code C # ou C ++ à utiliser à la place de JSON
• Application Lottie Viewer pour prévisualiser JSON et également générer du code

Ce dépôt contient également du code source pour les échantillons .

Démarrage rapide

Il existe deux options pour intégrer les animations Lottie dans votre projet WinUI 3 ou UWP .

Option n ° 1, en utilisant un chargeur dynamique

1. Installez CommunityToolkit.WinUI.Lottie Nuget Package pour le projet WINUI (ou CommunityToolkit.Uwp.Lottie pour le projet UWP).
2. Si vous utilisez C #, vous devrez peut-être également installer Microsoft.Graphics.Win2D (version 1.0.5 ou ci-dessous) pour le projet WINUI (ou Win2D.uwp et Microsoft.UI.Xaml pour le projet UWP).
3. Dans votre fichier de balisage .xaml ajoutez:

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

   ou pour le projet UWP:

       ...
       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 # 2, en utilisant CodeGen (recommandé)

1. Installez l'outil CodeGen à l'aide dotnet tool install lottiegen dans PowerShell
2. Exécuter Codegen Tool lottiegen -InputFile MyAnimation.json -Language cs -WinUIVersion 3
   • Pour les projets UWP, utilisez -WinUIVersion 2.X en fonction de la version de Microsoft.UI.Xaml
   • Autres options de langue: cppwinrt et cppcx
3. Ajouter des fichiers source générés au projet
4. Installez les packages à partir de l'étape 2 de l'option n ° 1 si nécessaire.
5. Dans votre fichier de balisage .xaml ajoutez:

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

   ou pour le projet UWP:

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

SDK pris en charge

• Mai 2019 Mise à jour (18362) et plus tard

Documentation

• Documentation et tutoriels
• Échantillons de lottie
• Visionneuse Lottie

Statut de construction

Emballer	Bifurquer	Statut	Dernière version NuGet
CommunityToolkit.winui.lottie	principal
CommunityToolkit.uwp.lottie	principal
Lottiegen	principal

Commentaires et demandes

Veuillez utiliser les problèmes GitHub pour les rapports de bogues et les demandes de fonctionnalités.

Principes

Ce projet a adopté le code de conduite défini par le Contributeur Covenant pour clarifier le comportement attendu dans notre communauté. Pour plus d'informations, consultez le Code de conduite de la fondation .NET.

Fondation .NET

Ce projet est soutenu par la Fondation .NET.