How to add lottie file in WinUi 3

Question

How to add lottie file in WinUi 3

Subramaniam, Lalith - Dell Team 21

Hi ,

I want to add lottie file animation into my WinUI application. Could you help me with a sample application.

Viorel 88,406 Reputation points

2023-02-27T09:48:22.87+00:00

Did you already consider the "Lottie-Windows" and the samples (https://github.com/CommunityToolkit/Lottie-Windows)?

Viorel 88,406 Reputation points

2023-02-27T09:48:22.87+00:00

Did you already consider the "Lottie-Windows" and the samples (https://github.com/CommunityToolkit/Lottie-Windows)?

Answer 1

Jeanine Zhang-MSFT 5,241 Microsoft Vendor

Hello,

Welcome to Microsoft Q&A!

I suggest you could follow the steps to bring these animations to your Windows applications.

1, (Optional but Recommended) Install the Lottie Viewer application from the Store and validate that the JSON file — LottieLogo1.json in this example — works as expected.

2, Install the Microsoft.UI.Xaml nuget package which contains the AnimatedVisualPlayer element. Modify your Page.xaml to include the namespace.

3, Install the latest Microsoft.Toolkit.Uwp.UI.Lottie nuget package. Modify your Page.xaml to include the namespace.

4, Add the JSON file to your project.

5, Instantiate the AnimatedVisualPlayer element and configure the LottieVisualSource to be consumed.

For more details you could refer to the Doc: Getting Started with Lottie-Windows

Thank you.

Jeanine

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Jeanine Zhang-MSFT 5,241 Reputation points Microsoft Vendor

2023-03-01T07:52:46.0133333+00:00

Haven't heard from you for a while. Have you got any updates about this issue? Could you please check my answer?
Subramaniam, Lalith - Dell Team 21 Reputation points

2023-03-01T10:44:11.4633333+00:00

I am using WinUI3 unpackaged projects I get the below error

NU1202: Package Microsoft.Toolkit.Uwp.UI.Lottie 7.1.1 is not compatible with net6.0-windows10.0.19041 (.NETCoreApp,Version=v6.0) / win10-x86. Package Microsoft.Toolkit.Uwp.UI.Lottie 7.1.1 supports: uap10.0.16299 (UAP,Version=v10.0.16299)

Is it not compatible for WinUi3
Subramaniam, Lalith - Dell Team 21 Reputation points

2023-03-01T11:38:17.7566667+00:00

As you said, we are trying to implement a same steps as mentioned in below link but it say it is not compatible with WinUI3 while updating/installing nuget packages

https://learn.microsoft.com/en-us/windows/communitytoolkit/animations/lottie-scenarios/getting_started_json

Could you please provide a proper solution to implement in WinUI3 application.

Answer 2

Castorix31 68,666

Lottie is not supported directly in WinUI 3.

You must use workarounds

See : WinUI3 support #478

Subramaniam, Lalith - Dell Team 21 Reputation points

2023-03-01T16:34:09.92+00:00

I tried the workaround you have mentioned but I got below the exception

Package LottieGen 7.1.1 is not compatible with net6.0-windows10.0.19041 (.NETCoreApp,Version=v6.0). Package LottieGen 7.1.1 supports: net5.0 (.NETCoreApp,Version=v5.0) / anyHi ,

Can you create a sample project with the workaround in winui3 and share it.
Castorix31 68,666 Reputation points

2023-03-01T16:50:27.8633333+00:00

I installed it from Developer Command Prompt (same TargetFramework as you) :
Castorix31 68,666 Reputation points

2023-03-01T17:37:48.5+00:00

I tested with a free animation from Google (from https://lottiefiles.com/featured?page=8), it works but there is a bug in the rendering (right side) :
Subramaniam, Lalith - Dell Team 21 Reputation points

2023-03-03T10:58:27.4033333+00:00

I tried loading the lottie and Can you please provide the working sample solution
Subramaniam, Lalith - Dell Team 21 Reputation points

2023-03-03T11:00:40.8466667+00:00

Can you help me providing the sample solution?

Castorix31 68,666

You generate the .cs with the .json, like :

LottieGen -Language CSharp -Public -WinUIVersion 3.0 -InputFile E:\Sources\WinUI3_Lottie\Assets\130153-santa-telegram-sticker.json

You Add : Microsoft.Graphics.Win2D package

You replace in the generated .cs :

IAnimatedVisual2

by

IAnimatedVisual

You replace :

result = (IGeometrySource2D)(object)CanvasGeometry.CreatePath(builder);

by

result = CanvasGeometry.CreatePath(builder);

and XAML with just a Button and the Lottie (change the main class) :

<!-- Copyright (c) Microsoft Corporation and Contributors. -->
<!-- Licensed under the MIT License. -->

<Window
    x:Class="WinUI3_Lottie.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:WinUI3_Lottie"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:animatedvisuals="using:AnimatedVisuals"
    mc:Ignorable="d">

    <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center">
        <Button x:Name="myButton" Click="myButton_Click">Click Me</Button>
        <!--Copied from WinUI3 Gallery-->
        <Border Width="400" Height="400"
                            BorderBrush="{ThemeResource ToolTipBorderThemeBrush}"
                            BorderThickness="5"
                            Background="LightGray"
                            Margin="0, 20, 0, 20">

            <!--  AnimatedVisualPlayer  -->
            <AnimatedVisualPlayer x:Name="Player"
                                                          AutoPlay="False">

                <AnimatedVisualPlayer.Source>
                    <!--  Codegen-ed Lottie animation source: /AnimatedVisuals/LottieLogo1.cs -->
                    <animatedvisuals:_130153_santa_telegram_sticker/>
                </AnimatedVisualPlayer.Source>

                <!-- Fallback since Lottie-Windows is only supported on OS version 17763 and above -->
                <AnimatedVisualPlayer.FallbackContent>
                    <DataTemplate>
                        <Image Source="/Assets/130153-santa-telegram-sticker.gif"/>
                    </DataTemplate>
                </AnimatedVisualPlayer.FallbackContent>
            </AnimatedVisualPlayer>
        </Border>
    </StackPanel>
</Window>

Button click :

        private void myButton_Click(object sender, RoutedEventArgs e)
        {
            //myButton.Content = "Clicked";
            if (!Player.IsPlaying)
            {
                // Play the animation at the currently specified playback rate.
                _ = Player.PlayAsync(fromProgress: 0, toProgress: 1, looped: false);
            }
        }

Castorix31 68,666 Reputation points

2023-03-12T15:57:56.0733333+00:00

Can you please provide the working sample solution

Can you help me providing the sample solution?

And then ?....

How to add lottie file in WinUi 3

2 answers

Activity