Lottie-Windows is a library for rendering Adobe After Effects animations natively in your application. This project adds Windows to the Lottie family of tools also targeting Android, iOS, and Web.
Lottie simplifies the design-to-code workflow for bringing engaging, interactive vector animations to your Windows applications, with significant improvements in terms of performance, quality, and engineering efficiency over traditional approaches such as gifs, manually coded animations, etc. Lottie-Windows uses the Windows.UI.Composition APIs to provide smooth 60fps animations and resolution-independent vector graphics.
Lottie-Windows consists of 3 related products:
- Lottie-Windows library for parsing and translating Bodymovin JSON files
- LottieGen command-line tool for generating C# or C++ code to be used instead of JSON
- Lottie Viewer application for previewing JSON and also generating code
This repo also contains source code for samples.
There are two options to integrate Lottie animations into your WinUI 3 or UWP project.
Option #1, using dynamic loader
- Install
CommunityToolkit.WinUI.Lottie
nuget package for WinUI project (orCommunityToolkit.Uwp.Lottie
for UWP project). - If you are using C# you may also need to install
Microsoft.Graphics.Win2D
(version 1.0.5 or below) for WinUI project (orWin2D.uwp
andMicrosoft.UI.Xaml
for UWP project). - In your
.xaml
markup file add:or for UWP project:... xmlns:lottie="using:CommunityToolkit.WinUI.Lottie" ... <AnimatedVisualPlayer> <lottie:LottieVisualSource UriSource="<asset path or web link to a json file>" /> </AnimatedVisualPlayer>
... 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, using codegen (recommended)
- Install codegen tool using
dotnet tool install lottiegen
in powershell - Run codegen tool
lottiegen -InputFile MyAnimation.json -Language cs -WinUIVersion 3
- For UWP projects use
-WinUIVersion 2.X
depending on the version ofMicrosoft.UI.Xaml
- Other language options:
cppwinrt
andcppcx
- For UWP projects use
- Add generated source files to the project
- Install packages from step 2 of Option #1 if needed.
- In your
.xaml
markup file add:or for UWP project:... xmlns:animatedvisuals="using:AnimatedVisuals" ... <AnimatedVisualPlayer> <animatedvisuals:MyAnimation/> </AnimatedVisualPlayer>
... xmlns:muxc="using:Microsoft.UI.Xaml.Controls" xmlns:animatedvisuals="using:AnimatedVisuals" ... <muxc:AnimatedVisualPlayer> <animatedvisuals:MyAnimation/> </muxc:AnimatedVisualPlayer>
- May 2019 Update (18362) and later
Package | Branch | Status | Latest nuget version |
---|---|---|---|
CommunityToolkit.WinUI.Lottie | main | ||
CommunityToolkit.Uwp.Lottie | main | ||
LottieGen | main |
Please use GitHub Issues for bug reports and feature requests.
This project has adopted the code of conduct defined by the Contributor Covenant to clarify expected behavior in our community. For more information see the .NET Foundation Code of Conduct.
This project is supported by the .NET Foundation.