Using Codegen

Consuming Bodymovin JSON files is the standard way of displaying Lottie animations on Web, Android, and iOS. However, this approach comes with the overhead of having to parse and translate JSON in your application’s process. You can get significant performance benefits by having Lottie-Windows generate the animation code as a C# or C++ class ahead of time, which may be used instead of the LottieVisualSource. Both approaches, JSON and Codegen, have the same visual outcome but different workflows and benefits.

Generating a C# or C++ class from JSON

To generate a C# or C++ file, you may either use the LottieGen command-line tool or the Lottie Viewer application.

LottieGen CLI

  1. In your command-line interface, install the LottieGen tool from nuget:

    dotnet tool install -g LottieGen
    
  2. Generate classes in your desired language as follows:

    LottieGen -InputFile LottieLogo1.json -Language cs
    

For additional information about additional options including optimizations, use LottieGen -Help.

Lottie Viewer GUI

  1. Install the Lottie Viewer application from the Store. Drag and drop your JSON file, or use the the “Pick a Lottie file” icon in the top left to open local files or URIs.

  2. Click the “Save Lottie as Code” icon in the top-right corner to generate C# or C++ classes. In the resulting Save As explorer window, select your destination folder, filename, and desired language.

    LottieViewerCodegen

Using the Codegen File

  1. Add the generated file, LottieLogo1.cs, to your project by following steps similar to those outlined previously. Ensure that the Build Action for all codegen C# or C++ files is set to Compile.

  2. By default, all codegen classes are generated in the AnimatedVisuals namespace. Modify your Page.xaml to include the namespace:

    xmlns:animatedvisuals="using:AnimatedVisuals"
    
  3. Install the Microsoft.UI.Xaml nuget package which contains the AnimatedVisualPlayer element. Modify your Page.xaml to include the namespace:

    xmlns:controls="using:Microsoft.UI.Xaml.Controls"
    
  4. Instantiate the AnimatedVisualPlayer element and configure its Source as follows:

        <Border Style="{StaticResource LottiePlayer}">
            <!--AnimatedVisualPlayer with AutoPlay-->
            <controls:AnimatedVisualPlayer x:Name="LottiePlayer">
                <!--Codegen class AnimatedVisuals/LottieLogo1.cs-->
                <animatedvisuals:LottieLogo1/>
            </controls:AnimatedVisualPlayer>
        </Border>
    

This should result in a looping Lottie animation that is visually identical to our earlier approach of using a JSON file:

Autoplay Gif

Resources