Lottie-Windows

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.

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:

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

   or for UWP project:

       ...
       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)

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:

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

   or for UWP project:

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

Supported SDKs

• May 2019 Update (18362) and later

Documentation

• Documentation and Tutorials
• Lottie Samples
• Lottie Viewer

Build Status

Package	Branch	Status	Latest nuget version
CommunityToolkit.WinUI.Lottie	main
CommunityToolkit.Uwp.Lottie	main
LottieGen	main

Feedback and Requests

Please use GitHub Issues for bug reports and feature requests.

Principles

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.

.NET Foundation

This project is supported by the .NET Foundation.