Edit

Share via

Lottie

  • Article

Lottie-Windows is a library for rendering Adobe AfterEffects animations natively in your applications. 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, 60 fps animations and resolution-independent vector graphics.

Lottie Gif

Try it in the sample app

Key Concepts

  • AnimatedVisualPlayer, a XAML element that plays the Lottie animation.
  • Lottie-Windows, a library for parsing and translating Bodymovin JSON files; provides the LottieVisualSource that is consumed by the AnimatedVisualPlayer.
  • Lottie Viewer, a Store app for previewing Lottie animations to test their visual correctness and to codegen C# or C++ classes.
  • LottieGen, a command-line tool for generating C# or C++ classes in lieu of using real-time JSON parsing.
  • Lottie Samples, a Store app that provides simple code examples for common Lottie animation scenarios.

Tutorials

The following documents help you get started with Lottie-Windows and provide simple code examples for common scenarios of usage:

Sample Code

Requirements

Device family Universal, 10.0.17763.0 or higher
Namespace Microsoft.Toolkit.Uwp.UI.Lottie
NuGet package Microsoft.Toolkit.Uwp.UI.Lottie

API

Resources