Home

Awesome

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 Gif

Lottie-Windows consists of 3 related products:

This repo also contains source code for samples.

<a name="quickstart"></a> 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>
    

<a name="supported"></a> Supported SDKs

<a name="documentation"></a> Documentation

Build Status

PackageBranchStatusLatest nuget version
CommunityToolkit.WinUI.LottiemainBuild StatusNuGet
CommunityToolkit.Uwp.LottiemainBuild StatusNuGet
LottieGenmainBuild StatusNuGet

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.