WPF: Как сгладить ColorAnimation с начальной точкой в ​​качестве прозрачного?

Question

Я анимирую фон кнопки на уровне шаблона элемента управления, но, поскольку исходный цвет фона установлен как «Прозрачный», я заметил странный эффект, когда переход переходит от прозрачного => некоторый белый / серый промежуточный = > мой нужный цвет.

Вот рисунок, показывающий эффект:

Стиль кнопки (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" определенно делает его более плавным, но промежуточный "серый" флаг sh - это все еще присутствует.

• Не указывает, что EasingFunction имеет такое же поведение

Answer 1

Вы видите немного белого, потому что Colors.Transparent определяется как прозрачный белый, т. Е. #00FFFFFF.

Вы можете анимировать в / из полностью прозрачного красного:

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