WPF:如何平滑起点为透明的 ColorAnimation？

Question

我正在控件模板级别为按钮的背景设置动画，但由于初始背景颜色设置为透明，我注意到一个奇怪的效果，其中过渡从透明 => 一些白色/灰色中间 => 我想要的颜色。

这是显示效果的 gif:

按钮样式 (XAML)

 <Style x:Key="btn-style"
         TargetType="Button">
    <Setter Property="Foreground"
            Value="Black" />
    <Setter Property="Background"
            Value="Transparent" />
    <Setter Property="Padding"
            Value="15,0,15,0" />
    <Setter Property="BorderBrush"
            Value="Transparent" />
    <Setter Property="BorderThickness"
            Value="0" />
    <Setter Property="Template">
      <Setter.Value>
        <ControlTemplate TargetType="{x:Type ButtonBase}">
          <Border x:Name="PART_Border"
                  Background="{TemplateBinding Background}"
                  BorderBrush="{TemplateBinding BorderBrush}"
                  BorderThickness="{TemplateBinding BorderThickness}"
                  Padding="{TemplateBinding Padding}">
            <ContentPresenter x:Name="PART_ContentHost"
                              HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                              VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
          </Border>
          <ControlTemplate.Triggers>
            <MultiTrigger>
              <MultiTrigger.Conditions>
                <Condition Property="IsMouseOver"
                           Value="True" />
              </MultiTrigger.Conditions>
              <MultiTrigger.EnterActions>
                <BeginStoryboard>
                  <Storyboard>

                    <ColorAnimation Duration="0:0:0.125"
                                    Storyboard.TargetProperty="(Button.Background).(SolidColorBrush.Color)"
                                    From="Transparent"
                                    To="#ff0000">
                      <ColorAnimation.EasingFunction>
                        <ExponentialEase EasingMode="EaseInOut"
                                         Exponent="2" />
                      </ColorAnimation.EasingFunction>
                    </ColorAnimation>
                  </Storyboard>
                </BeginStoryboard>
              </MultiTrigger.EnterActions>
              <MultiTrigger.ExitActions>
                <BeginStoryboard>
                  <Storyboard>
                    <ColorAnimation Duration="0:0:0.125"
                                    Storyboard.TargetProperty="(Button.Background).(SolidColorBrush.Color)"
                                    From="#ff0000"
                                    To="Transparent">
                      <ColorAnimation.EasingFunction>
                        <ExponentialEase EasingMode="EaseInOut"
                                         Exponent="2" />
                      </ColorAnimation.EasingFunction>
                    </ColorAnimation>

                  </Storyboard>
                </BeginStoryboard>
              </MultiTrigger.ExitActions>
            </MultiTrigger>
          </ControlTemplate.Triggers>
        </ControlTemplate>
      </Setter.Value>
    </Setter>
  </Style>

我尝试过的东西

设置 DesiredFrameRate="60"肯定会让它更流畅，但中间的“灰色”闪光仍然存在。

不指定 EasingFunction 具有相同的行为

Answer 1

你看到一些白色，因为 Colors.Transparent被定义为透明白色，即 #00FFFFFF .

您可以为完全透明的红色/从完全透明的红色设置动画:

<ColorAnimation Storyboard.TargetProperty="Background.Color"
                From="#00ff0000" To="#ffff0000"
                Duration="0:0:0.125">
    ...
</ColorAnimation>