WPF ColorAnimation似乎保留了部分原始颜色？

Question

我在彩色动画方面遇到了一个奇怪的问题。

我有一个绑定(bind)到列表框的项目列表。这些项目有一个枚举属性，可以具有三个值之一 - NoRemarks、RemarksFound 和 RemarksUpdated。

在此列表框的数据模板上，我有一个矩形，它显示与项目状态相关的颜色 - 红色、橙色或绿色。模板中有一个数据触发器可以为盒子设置动画，但每当动画触发时，它似乎都会保留旧的颜色。如果我将动画从红色变为绿色，我会得到一种橙色的深绿色。如果我从橙色到绿色设置动画，我会得到类似的颜色，尽管我可以看到颜色与从红色到绿色设置动画时略有不同。

这是 XAML - 我只包含了必要的部分:

矩形:

<Rectangle x:Name="HeaderRemarkStatusRectangle" Grid.Column="1" Grid.Row="0" Grid.RowSpan="3" HorizontalAlignment="Left"
        RadiusX="1" RadiusY="1" Width="10" Margin="3" StrokeThickness="1" >
    <Rectangle.Stroke>
      <SolidColorBrush Color="#FFDC5A5A" x:Name="RectangleStroke" />
    </Rectangle.Stroke>
    <Rectangle.Fill>
      <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
        <GradientStop Color="#ff7a7a" Offset="0.5" x:Name="GradientStop1" />
        <GradientStop Color="#ff5653" Offset="0.5" x:Name="GradientStop2" />
      </LinearGradientBrush>
    </Rectangle.Fill>
  </Rectangle>

触发因素:

  <DataTrigger Binding="{Binding Path=ItemStatus}" Value="RemarksUpdated">
    <DataTrigger.EnterActions>
      <BeginStoryboard>
        <BeginStoryboard.Storyboard>
          <Storyboard Duration="0:0:0.5" >
            <ColorAnimation Storyboard.TargetName="GradientStop1" Storyboard.TargetProperty="Color" To="#83ec71" />
            <ColorAnimation Storyboard.TargetName="GradientStop2" Storyboard.TargetProperty="Color" To="#5dda4e" />
            <ColorAnimation Storyboard.TargetName="RectangleStroke" Storyboard.TargetProperty="Color" To="#FF50AA46" />
          </Storyboard>
        </BeginStoryboard.Storyboard>
      </BeginStoryboard>
    </DataTrigger.EnterActions>
  </DataTrigger>
</DataTemplate.Triggers>

我尝试了一些方法来解决这个问题...

我尝试为每个触发器设置 Datatrigger.exitactions 以将颜色返回为白色(有点胡言乱语，但我想看看缺少的“From”部分是否是问题所在)。当动画触发时，我最终得到了一个半透明的盒子，尽管它的颜色是正确的。

我还尝试过设置“from”属性 - 再次，不太实用，因为我不知道触发器的原始颜色是什么，但我想看看效果。我得到了与上面类似的结果。

还尝试更改 FillBehaviour 属性，但将其设置为“停止”意味着动画完成后颜色将恢复为原始颜色(如预期)。

我认为动画将从当前颜色(从数据模板或当前动画(如果存在))开始动画，并以新颜色动画。我不太明白为什么我似乎得到了原始颜色和新颜色之间的颜色。这是彩色动画的已知问题还是我的触发器的问题？

谢谢大家

Answer 1

您需要设置 ColorAnimation 对象的持续时间。默认Duration动画的时长为 1 秒，因此 0.5 秒的 Storyboard仅运行动画的一半。

<Storyboard>
    <ColorAnimation Storyboard.TargetName="GradientStop1" Storyboard.TargetProperty="Color" To="#83ec71" Duration="0:0:0.5"/>
    <ColorAnimation Storyboard.TargetName="GradientStop2" Storyboard.TargetProperty="Color" To="#5dda4e" Duration="0:0:0.5"/>
    <ColorAnimation Storyboard.TargetName="RectangleStroke" Storyboard.TargetProperty="Color" To="#FF50AA46" Duration="0:0:0.5"/>
</Storyboard>