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>

Things我试过

• 设置DesiredFrameRate="60“肯定会使其更平滑，但中间的”灰色“闪存仍然存在。

Answer 1

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

您可以使用完全透明的红色动画：

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