Lottie Animation in WinUI 3

Question

I am trying to implement lottie animation in a WinUI 3 app. Previously it was implemented in UWP. Where I used AnimatedVisualPlayer from Microsoft.UI.Xaml.Controls and LottieVisualSource from Microsoft.Toolkit.Uwp.UI.Lottie. The code snippet is shown here,

<AnimatedVisualPlayer Stretch="None">
    <LottieVisualPlayer UriSource="AnimatedImage.json" />
</AnimatedVisualPlayer>

But in WinUI3 I cannot find any alternate for AnimatedVisualPlayer. Is there any alternate way to use Lottie Animation in WinUI 3?

Answer 1

You should need to install the CommunityToolkit.WinUI.Lottie NuGet package.

<Page
...
    xmlns:lottie="using:CommunityToolkit.WinUI.Lottie">

    <AnimatedVisualPlayer x:Name="LottiePlayer">
        <lottie:LottieVisualSource x:Name="LottieJsonSource" UriSource="ms-appx:///AnimatedVisuals/LottieLogo1.json"/>
    </AnimatedVisualPlayer>

</Page>