How to add lottie file in WinUi 3

2023-02-27T07:54:10.1933333+00:00

Hi ,

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

Windows App SDK
Windows App SDK
A set of Microsoft open-source libraries, frameworks, components, and tools to be used in apps to access Windows platform functionality on many versions of Windows. Previously known as Project Reunion.
470 questions
{count} votes

2 answers

Sort by: Most helpful
  1. Jeanine Zhang-MSFT 5,241 Reputation points Microsoft Vendor
    2023-02-27T08:47:04.99+00:00

    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.


  2. Castorix31 68,666 Reputation points
    2023-03-01T13:11:36.5933333+00:00

    Lottie is not supported directly in WinUI 3.

    You must use workarounds

    See : WinUI3 support #478