[UWP] Change Lottie Animation Color / Theme Dynamically

Question

[UWP] Change Lottie Animation Color / Theme Dynamically

Md. Niaz Mahmud 171

I have used lottie json animation in xaml uwp using "CommunityToolkit.WinUI.Lottie" and "AnimatedVisualPlayer".

But for dark theme I can not see the lottie animation as the color is fixed. How can we dynamically change color of lottie animation?

<Page x:Class="Lottie_Test.MainPage"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:local="using:Lottie_Test"
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
      xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
      xmlns:lottie="using:CommunityToolkit.WinUI.Lottie"
      mc:Ignorable="d"
      Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Grid Background="White">
        <Border Background="Transparent"
                BorderThickness="3"
                BorderBrush="Transparent"
                Width="30"
                Height="30"
                HorizontalAlignment="Center"
                VerticalAlignment="Center">
            <muxc:AnimatedVisualPlayer x:Name="VoiceWaveLottiePlayer"
                                       AutomationProperties.Name="Lottie animation"
                                       AutoPlay="True">
                <lottie:LottieVisualSource x:Name="LottieJsonSource"
                                           Options="All"
                                           UriSource="ms-appx:///Assets/lottie_equalizer.json" />
            </muxc:AnimatedVisualPlayer>
        </Border>
    </Grid>
</Page>

Castorix31 91,886

In WinUI 3, If I change the Background of the border, for example LightGray, on a random Lottie I got from Google , I get :

<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>

User's image

Anonymous

2024-10-10T02:36:30.0233333+00:00

Any updates about this issue?
Md. Niaz Mahmud 171 Reputation points

2024-10-18T08:56:23.7366667+00:00

@Anonymous Thank you for your response. And Sorry for the late reply.

I was actually talking about is there any way to change stroke color of Lottie animation programmatically so that in Theme Change we can change color of the Animation.

For example, Check this free lottie animation from google, Animation - 1729241422791.txt (please change the extension to .json for using as Lottie).

This animation stroke is black by color. If we use it on Dark Theme with a Black Background it can not be seen, is there any way to change color programmatically? Or We need to make another lottie file and change the resource dynamically?
Md. Niaz Mahmud 171 Reputation points

2024-10-18T09:05:20.4933333+00:00

Actually, we are thinking what if we can change the stroke color of lottie animation dynamically.

Animation - 1729241422791.txt (convert extension to .json for lottie file). For example, this simple lottie animation from google has only black strokes. Is there any way change its color dynamically?

Check Lottie Viewer (https://www.microsoft.com/store/productId/9P7X9K692TMW?ocid=pdpshare) it can change color dynamically
Anonymous

2024-10-18T09:14:59.0766667+00:00

is there any way to change color programmatically? Or We need to make another lottie file and change the resource dynamically?

There is no way to change the content of the lottie file in code after going through the community toolkit document. I think you will need to use different lottie files instead.
Md. Niaz Mahmud 171 Reputation points

2024-10-21T05:11:36.04+00:00
Hello, @Anonymous Thank you for your response. I have tried this in MainPage.xaml.cs, on Theme Change event handler,

public async void SetVoiceWaveAnimationPath(ApplicationTheme theme) { if (theme == ApplicationTheme.Dark) { LottieJsonSource.UriSource = new System.Uri("ms-appx:///Assets/lottie_voice_equalizer_dark.json"); } else { LottieJsonSource.UriSource = new System.Uri("ms-appx:///Assets/lottie_voice_equalizer_light.json"); } }

But, when the Animation is running, and I change Theme from windows system settings, The animation source is not changed, rather, it remains the same as before.

But, if the animation UI is not loaded (x:Load = false) and Theme is changed, then this code block works. Is there any issue that, animation player does not change to new Uri source while running? Could you please help regarding this?
Md. Niaz Mahmud 171 Reputation points

2024-10-21T05:21:37.7366667+00:00
Hello, @Anonymous Thank you for your response. I have tried below code for run time Theme/High Contrast change for Lottie animation in Theme Change event handler.

public void SetVoiceWaveAnimationPath(ApplicationTheme theme) { if (theme == ApplicationTheme.Dark) { LottieJsonSource.UriSource = new System.Uri("ms-appx:///Assets/lottie_voice_equalizer_dark.json"); } else { LottieJsonSource.UriSource = new System.Uri("ms-appx:///Assets/lottie_voice_equalizer_light.json"); } }

But when animation is running, and theme is changed from windows system settings, then animation source is not changed.

But, when animation UI is reloaded then animation source is changed. Is there any issue regarding run time animation source change for lottie animation? Could you please help regarding this?

Junjie Zhu - MSFT 21,746

Hi @Md. Niaz Mahmud ,

I use theme listner to dynamically switch json files, and the UI changes with the theme.

using Microsoft.Toolkit.Uwp.UI.Helpers;

 public MainPage()
 {
     this.InitializeComponent();
     var Listener = new ThemeListener();
     Listener.ThemeChanged += Listener_ThemeChanged; 
 }
 private void Listener_ThemeChanged(ThemeListener sender)
 {
     var theme = sender.CurrentTheme;
     if (theme == ApplicationTheme.Dark)
     {
         LottieJsonSource.UriSource = new System.Uri("ms-appx:///Assets/LightBulb.json");
     }
     else
     {
         LottieJsonSource.UriSource = new System.Uri("ms-appx:///Assets/LottieLogo1.json");
     }
 }

Md. Niaz Mahmud 171 Reputation points

2024-10-22T05:40:19.7133333+00:00

Thanks, this is working now.

Answer accepted by question author

0 additional answers

Your answer

Castorix31 91,886 Reputation points

2024-09-30T12:36:22.28+00:00

In WinUI 3, If I change the Background of the border, for example LightGray, on a random Lottie I got from Google , I get :

<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>  <Border Width="400" Height="400" BorderBrush="{ThemeResource ToolTipBorderThemeBrush}" BorderThickness="5" Background="LightGray" Margin="0, 20, 0, 20">  <AnimatedVisualPlayer x:Name="Player" AutoPlay="False"> <AnimatedVisualPlayer.Source>  <animatedvisuals:_130153_santa_telegram_sticker/> </AnimatedVisualPlayer.Source>  <AnimatedVisualPlayer.FallbackContent> <DataTemplate> <Image Source="/Assets/130153-santa-telegram-sticker.gif"/> </DataTemplate> </AnimatedVisualPlayer.FallbackContent> </AnimatedVisualPlayer> </Border> </StackPanel> </Window>
Anonymous

2024-10-10T02:36:30.0233333+00:00

Any updates about this issue?
Md. Niaz Mahmud 171 Reputation points

2024-10-18T08:56:23.7366667+00:00

@Anonymous Thank you for your response. And Sorry for the late reply.

I was actually talking about is there any way to change stroke color of Lottie animation programmatically so that in Theme Change we can change color of the Animation.

For example, Check this free lottie animation from google, Animation - 1729241422791.txt (please change the extension to .json for using as Lottie).

This animation stroke is black by color. If we use it on Dark Theme with a Black Background it can not be seen, is there any way to change color programmatically? Or We need to make another lottie file and change the resource dynamically?
Md. Niaz Mahmud 171 Reputation points

2024-10-18T09:05:20.4933333+00:00

Actually, we are thinking what if we can change the stroke color of lottie animation dynamically.

Animation - 1729241422791.txt (convert extension to .json for lottie file). For example, this simple lottie animation from google has only black strokes. Is there any way change its color dynamically?

Check Lottie Viewer (https://www.microsoft.com/store/productId/9P7X9K692TMW?ocid=pdpshare) it can change color dynamically
Anonymous

2024-10-18T09:14:59.0766667+00:00

is there any way to change color programmatically? Or We need to make another lottie file and change the resource dynamically?

There is no way to change the content of the lottie file in code after going through the community toolkit document. I think you will need to use different lottie files instead.
Md. Niaz Mahmud 171 Reputation points

2024-10-21T05:11:36.04+00:00

Hello, @Anonymous Thank you for your response. I have tried this in MainPage.xaml.cs, on Theme Change event handler,

public async void SetVoiceWaveAnimationPath(ApplicationTheme theme) { if (theme == ApplicationTheme.Dark) { LottieJsonSource.UriSource = new System.Uri("ms-appx:///Assets/lottie_voice_equalizer_dark.json"); } else { LottieJsonSource.UriSource = new System.Uri("ms-appx:///Assets/lottie_voice_equalizer_light.json"); } }

But, when the Animation is running, and I change Theme from windows system settings, The animation source is not changed, rather, it remains the same as before.

But, if the animation UI is not loaded (x:Load = false) and Theme is changed, then this code block works. Is there any issue that, animation player does not change to new Uri source while running? Could you please help regarding this?
Md. Niaz Mahmud 171 Reputation points

2024-10-21T05:21:37.7366667+00:00

Hello, @Anonymous Thank you for your response. I have tried below code for run time Theme/High Contrast change for Lottie animation in Theme Change event handler.

public void SetVoiceWaveAnimationPath(ApplicationTheme theme) { if (theme == ApplicationTheme.Dark) { LottieJsonSource.UriSource = new System.Uri("ms-appx:///Assets/lottie_voice_equalizer_dark.json"); } else { LottieJsonSource.UriSource = new System.Uri("ms-appx:///Assets/lottie_voice_equalizer_light.json"); } }

But when animation is running, and theme is changed from windows system settings, then animation source is not changed.

But, when animation UI is reloaded then animation source is changed. Is there any issue regarding run time animation source change for lottie animation? Could you please help regarding this?
Junjie Zhu - MSFT 21,746 Reputation points

2024-10-21T08:50:44.7333333+00:00

Hi @Md. Niaz Mahmud ,

I use theme listner to dynamically switch json files, and the UI changes with the theme.

using Microsoft.Toolkit.Uwp.UI.Helpers; public MainPage() { this.InitializeComponent(); var Listener = new ThemeListener(); Listener.ThemeChanged += Listener_ThemeChanged; } private void Listener_ThemeChanged(ThemeListener sender) { var theme = sender.CurrentTheme; if (theme == ApplicationTheme.Dark) { LottieJsonSource.UriSource = new System.Uri("ms-appx:///Assets/LightBulb.json"); } else { LottieJsonSource.UriSource = new System.Uri("ms-appx:///Assets/LottieLogo1.json"); } }
Md. Niaz Mahmud 171 Reputation points

2024-10-22T05:40:19.7133333+00:00

Thanks, this is working now.

Answer 1

Hi @Md. Niaz Mahmud ,

Let me summarize this issue

It is recommended to use Theme Listner to dynamically switch json files, then the UI will change with the theme.

using Microsoft.Toolkit.Uwp.UI.Helpers;
 public MainPage()
 {
     this.InitializeComponent();
     var Listener = new ThemeListener();
     Listener.ThemeChanged += Listener_ThemeChanged; 
 }
 private void Listener_ThemeChanged(ThemeListener sender)
 {
     var theme = sender.CurrentTheme;
     if (theme == ApplicationTheme.Dark)
     {
         LottieJsonSource.UriSource = new System.Uri("ms-appx:///Assets/LightBulb.json");
     }
     else
     {
         LottieJsonSource.UriSource = new System.Uri("ms-appx:///Assets/LottieLogo1.json");
     }
 }

Thank you.

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.