From 1570c149f0c129c9d98426df4627ba91294d043f Mon Sep 17 00:00:00 2001 From: aborziak-ms <83784664+aborziak-ms@users.noreply.github.com> Date: Tue, 27 Feb 2024 13:27:57 -0800 Subject: [PATCH] Added quickstart to readme, fixed build status section (#550) --- README.md | 63 ++++++++++++++++++++++++++++++++++++++++++++++++++++--- 1 file changed, 60 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 7a65e654..c28c4526 100644 --- a/README.md +++ b/README.md @@ -13,18 +13,75 @@ Lottie-Windows consists of 3 related products: This repo also contains source code for **[samples](/LottieViewer)**. +## Quick start + +There are **two** options to integrate Lottie animations into your **WinUI 3** or **UWP** project. + +**Option #1, using dynamic loader** +1. Install `CommunityToolkit.WinUI.Lottie` nuget package for WinUI project (or `CommunityToolkit.Uwp.Lottie` for UWP project). +2. If you are using C# you may also need to install `Microsoft.Graphics.Win2D` **(version 1.0.5 or below)** for WinUI project (or `Win2D.uwp` and `Microsoft.UI.Xaml` for UWP project). +3. In your `.xaml` markup file add: + ```xml + ... + xmlns:lottie="using:CommunityToolkit.WinUI.Lottie" + ... + + + + ``` + or for UWP project: + ```xml + ... + xmlns:muxc="using:Microsoft.UI.Xaml.Controls" + xmlns:lottie="using:CommunityToolkit.Uwp.Lottie" + ... + + + + ``` +**Option #2, using codegen (recommended)** +1. Install codegen tool using `dotnet tool install lottiegen` in powershell +2. Run codegen tool `lottiegen -InputFile MyAnimation.json -Language cs -WinUIVersion 3` + - For UWP projects use `-WinUIVersion 2.X` depending on the version of `Microsoft.UI.Xaml` + - Other language options: `cppwinrt` and `cppcx` +3. Add generated source files to the project +4. Install packages from step 2 of Option #1 if needed. +5. In your `.xaml` markup file add: + ```xml + ... + xmlns:animatedvisuals="using:AnimatedVisuals" + ... + + + + ``` + or for UWP project: + ```xml + ... + xmlns:muxc="using:Microsoft.UI.Xaml.Controls" + xmlns:animatedvisuals="using:AnimatedVisuals" + ... + + + + ``` + ## Supported SDKs * May 2019 Update (18362) and later -## Getting Started +## Documentation * [Documentation and Tutorials](https://aka.ms/lottiedocs) * [Lottie Samples](https://aka.ms/lottiesamples) * [Lottie Viewer](https://aka.ms/lottieviewer) ## Build Status -| Target | Branch | Status | Recommended NuGet package | +| Package | Branch | Status | Latest nuget version | | ------ | ------ | ------ | ------ | -| 7.1.0 release | main | [![Build Status](https://dev.azure.com/dotnet/WindowsCommunityToolkit/_apis/build/status/Microsoft.Toolkit.Uwp.UI.Lottie?branchName=main)](https://dev.azure.com/dotnet/WindowsCommunityToolkit/_build/latest?definitionId=61&branchName=main) | [![NuGet](https://img.shields.io/nuget/v/Microsoft.Toolkit.Uwp.UI.Lottie.svg)](https://www.nuget.org/packages/Microsoft.Toolkit.Uwp.UI.Lottie/) | +| CommunityToolkit.WinUI.Lottie | main | [![Build Status](https://dev.azure.com/dotnet/WindowsCommunityToolkit/_apis/build/status/Microsoft.Toolkit.Uwp.UI.Lottie?branchName=main)](https://dev.azure.com/dotnet/WindowsCommunityToolkit/_build/latest?definitionId=61&branchName=main) | [![NuGet](https://img.shields.io/nuget/v/CommunityToolkit.WinUI.Lottie.svg)](https://www.nuget.org/packages/CommunityToolkit.WinUI.Lottie/) | +| CommunityToolkit.Uwp.Lottie | main | [![Build Status](https://dev.azure.com/dotnet/WindowsCommunityToolkit/_apis/build/status/Microsoft.Toolkit.Uwp.UI.Lottie?branchName=main)](https://dev.azure.com/dotnet/WindowsCommunityToolkit/_build/latest?definitionId=61&branchName=main) | [![NuGet](https://img.shields.io/nuget/v/CommunityToolkit.Uwp.Lottie.svg)](https://www.nuget.org/packages/CommunityToolkit.Uwp.Lottie/) | +| LottieGen | main | [![Build Status](https://dev.azure.com/dotnet/WindowsCommunityToolkit/_apis/build/status/Microsoft.Toolkit.Uwp.UI.Lottie?branchName=main)](https://dev.azure.com/dotnet/WindowsCommunityToolkit/_build/latest?definitionId=61&branchName=main) | [![NuGet](https://img.shields.io/nuget/v/LottieGen.svg)](https://www.nuget.org/packages/LottieGen/) | + + ## Feedback and Requests Please use [GitHub Issues](https://github.com/windows-toolkit/Lottie-Windows/issues) for bug reports and feature requests.