Best way to animate Stamina Bar

TedLogan · 14 Mar 2025, 15:48

Hi,

I want to animate a Stamina Bar.
In my blueprints, I update the value on every tick if there are changes and send them to Noesis.
But the progress bar is not nicely animated; it just flickers.
I have already tried sending the values only every 0.5 seconds, but it still doesn't display smoothly.

Do I need to change something in my blueprints or in the XAML?

Thanks and best regards

  <Storyboard x:Key="StaminaBarAnimation">
      <DoubleAnimation 
          Storyboard.TargetName="StaminaBar"
          Storyboard.TargetProperty="Value"
          Duration="0:0:0.3"/>
  </Storyboard>
  .
  .
          <ProgressBar x:Name="StaminaBar"
                     Width="200"
                     Height="20"
                     Minimum="0"
                     Maximum="{Binding MaxStamina}"
                     Value="{Binding Stamina}"
                     Visibility="{Binding IsStaminaBarVisible}"
                     HorizontalAlignment="Center"
                     VerticalAlignment="Top"
                     Margin="0,80,0,0"/>

14 Mar 2025, 19:46

The default ProgressBar template just reflects the changes in the Value property instantly. I guess you want something that animates from the previous value to the new one, right?
In that case you need to create a template like this:

<Grid
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:b="http://schemas.microsoft.com/xaml/behaviors">
  <Grid.Resources>
    <ControlTemplate x:Key="AnimatedProgressBar" TargetType="ProgressBar">
      <Border x:Name="PART_Track" Background="{TemplateBinding Background}" Padding="5">
        <Grid>
          <Border x:Name="PART_Indicator" HorizontalAlignment="Left" Width="0" Background="Cyan"/>
          <Border x:Name="AnimatedIndicator" Background="{TemplateBinding Foreground}" HorizontalAlignment="Left" Width="0">
            <b:Interaction.Triggers>
              <b:PropertyChangedTrigger Binding="{Binding Width, ElementName=PART_Indicator}">
                <b:ControlStoryboardAction>
                  <b:ControlStoryboardAction.Storyboard>
                    <Storyboard>
                      <DoubleAnimation Duration="0:0:0.3" Storyboard.TargetName="AnimatedIndicator" Storyboard.TargetProperty="Width"
                        To="{Binding Width, ElementName=PART_Indicator}"/>
                    </Storyboard>
                  </b:ControlStoryboardAction.Storyboard>
                </b:ControlStoryboardAction>
              </b:PropertyChangedTrigger>
            </b:Interaction.Triggers>
          </Border>
        </Grid>
      </Border>
    </ControlTemplate>
  </Grid.Resources>
  <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
    <ProgressBar Width="500" Height="50" Background="Black" Foreground="#D02080F0" Minimum="0" Maximum="100" Value="{Binding Value, ElementName=progress}" Template="{StaticResource AnimatedProgressBar}"/>
    <Slider x:Name="progress" Width="200" Minimum="0" Maximum="100" Value="0" IsMoveToPointEnabled="True" Margin="0,50"/>
  </StackPanel>
</Grid>

Is this what you're looking for?

TedLogan · 16 Mar 2025, 15:49

The default ProgressBar template just reflects the changes in the Value property instantly. I guess you want something that animates from the previous value to the new one, right?
In that case you need to create a template like this:

<Grid
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:b="http://schemas.microsoft.com/xaml/behaviors">
  <Grid.Resources>
    <ControlTemplate x:Key="AnimatedProgressBar" TargetType="ProgressBar">
      <Border x:Name="PART_Track" Background="{TemplateBinding Background}" Padding="5">
        <Grid>
          <Border x:Name="PART_Indicator" HorizontalAlignment="Left" Width="0" Background="Cyan"/>
          <Border x:Name="AnimatedIndicator" Background="{TemplateBinding Foreground}" HorizontalAlignment="Left" Width="0">
            <b:Interaction.Triggers>
              <b:PropertyChangedTrigger Binding="{Binding Width, ElementName=PART_Indicator}">
                <b:ControlStoryboardAction>
                  <b:ControlStoryboardAction.Storyboard>
                    <Storyboard>
                      <DoubleAnimation Duration="0:0:0.3" Storyboard.TargetName="AnimatedIndicator" Storyboard.TargetProperty="Width"
                        To="{Binding Width, ElementName=PART_Indicator}"/>
                    </Storyboard>
                  </b:ControlStoryboardAction.Storyboard>
                </b:ControlStoryboardAction>
              </b:PropertyChangedTrigger>
            </b:Interaction.Triggers>
          </Border>
        </Grid>
      </Border>
    </ControlTemplate>
  </Grid.Resources>
  <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
    <ProgressBar Width="500" Height="50" Background="Black" Foreground="#D02080F0" Minimum="0" Maximum="100" Value="{Binding Value, ElementName=progress}" Template="{StaticResource AnimatedProgressBar}"/>
    <Slider x:Name="progress" Width="200" Minimum="0" Maximum="100" Value="0" IsMoveToPointEnabled="True" Margin="0,50"/>
  </StackPanel>
</Grid>

Is this what you're looking for?

Thank you very much! Thats it :)

Best way to animate Stamina Bar Topic is solved

Best way to animate Stamina Bar

Re: Best way to animate Stamina Bar

Re: Best way to animate Stamina Bar

Who is online