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 121.3K 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)?
Jeanine Zhang-MSFT 11,341 Reputation points Microsoft External Staff

2023-04-10T06:17:03.15+00:00

Haven't heard from you for a while. Have you got any updates about this issue? Could you please check Castorix31's answer?

2 answers

Your answer

Viorel 121.3K 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)?
Jeanine Zhang-MSFT 11,341 Reputation points Microsoft External Staff

2023-04-10T06:17:03.15+00:00

Haven't heard from you for a while. Have you got any updates about this issue? Could you please check Castorix31's answer?

Answer 1

Deleted

This answer has been deleted due to a violation of our Code of Conduct. The answer was manually reported or identified through automated detection before action was taken. Please refer to our Code of Conduct for more information.

3 deleted comments

Comments have been turned off. Learn more

Answer 2

Castorix31 88,381

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 88,381 Reputation points

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

I installed it from Developer Command Prompt (same TargetFramework as you) :
Castorix31 88,381 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 88,381

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 88,381 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 ?....

Share via

How to add lottie file in WinUi 3

2 answers

Your answer