Анимация с полупрозрачными цветами имеет странный эффект

Question

Я работал с некоторыми простыми анимациями, когда заметил странный эффект при наведении мыши на кнопку.Цвет фона, казалось, потемнел, а затем снова осветлился, но код анимации не заставил его это сделать.Вот урезанная версия кода, демонстрирующая этот странный эффект:

<Window x:Class="WpfApp1.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Title="MainWindow" Height="950" Width="800">
    <Window.Resources>
        <Style TargetType="{x:Type Button}">
            <Setter Property="Padding" Value="16,3,16,5" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Button}">
                        <Border Name="Border" Background="White" BorderBrush="#33323232" Height="{TemplateBinding Height}" MinWidth="{TemplateBinding MinWidth}" BorderThickness="2" Padding="{TemplateBinding Padding}" SnapsToDevicePixels="True">
                            <ContentPresenter Name="ContentPresenter" ContentSource="Content" TextElement.FontSize="14" HorizontalAlignment="Center" VerticalAlignment="Center" />
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Trigger.EnterActions>
                                    <BeginStoryboard>
                                        <Storyboard DecelerationRatio="0.75">
                                            <ColorAnimation Storyboard.TargetName="Border" Storyboard.TargetProperty="Background.Color" BeginTime="0:0:0" Duration="0:0:2" To="#1A323232" />
                                        </Storyboard>
                                    </BeginStoryboard>
                                </Trigger.EnterActions>
                                <Trigger.ExitActions>
                                    <BeginStoryboard>
                                        <Storyboard DecelerationRatio="0.75">
                                            <ColorAnimation Storyboard.TargetName="Border" Storyboard.TargetProperty="Background.Color" BeginTime="0:0:0" Duration="0:0:2" From="#1A323232" />
                                        </Storyboard>
                                    </BeginStoryboard>
                                </Trigger.ExitActions>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>
    <Button HorizontalAlignment="Center" VerticalAlignment="Center" Width="120" Height="32" Content="Click me" />
</Window>

Обратите внимание, что в этом примере я замедлил анимацию, чтобы сделать этот странный эффект более понятным для вас.После экспериментов я обнаружил, что если я использую более темный цвет для анимации, анимация будет идти прямо к этому цвету (работает правильно).Я также заметил, что если я установлю альфа-канал на 1 (FF), проблема также исчезнет.Попробуйте заменить анимацию в приведенном выше примере этими двумя:

<ColorAnimation Storyboard.TargetName="Border" 
    Storyboard.TargetProperty="Background.Color"
    BeginTime="0:0:0" Duration="0:0:2" To="#EAEAEA" />

...

<ColorAnimation Storyboard.TargetName="Border" 
    Storyboard.TargetProperty="Background.Color" 
    BeginTime="0:0:0" Duration="0:0:2" From="#EAEAEA" />

Теперь вы должны увидеть желаемый эффект.Это то, что я должен был сделать в конце, но я действительно хотел использовать вместо этого полупрозрачные цвета.Итак, мой вопрос Кто-нибудь знает, что происходит не так при анимации с полупрозрачными цветами и как я могу это исправить ?

Answer 1

Когда вы анимируете непрозрачный белый цвет в сторону все более прозрачного серого или черного, цвет сначала становится все более серым, но в определенный момент белый фон начинает просвечивать все больше и больше, так что в конечном итоге (при #00000000) толькобелый фон остается.

Эффект не такой странный, когда вы пытаетесь это сделать:

<StackPanel Background="White">
    <Rectangle Width="100" Height="20" Fill="#ffff"/>
    <Rectangle Width="100" Height="20" Fill="#eeee"/>
    <Rectangle Width="100" Height="20" Fill="#dddd"/>
    <Rectangle Width="100" Height="20" Fill="#cccc"/>
    <Rectangle Width="100" Height="20" Fill="#bbbb"/>
    <Rectangle Width="100" Height="20" Fill="#aaaa"/>
    <Rectangle Width="100" Height="20" Fill="#9999"/>
    <Rectangle Width="100" Height="20" Fill="#8888"/>
    <Rectangle Width="100" Height="20" Fill="#7777"/>
    <Rectangle Width="100" Height="20" Fill="#6666"/>
    <Rectangle Width="100" Height="20" Fill="#5555"/>
    <Rectangle Width="100" Height="20" Fill="#4444"/>
    <Rectangle Width="100" Height="20" Fill="#3333"/>
    <Rectangle Width="100" Height="20" Fill="#2222"/>
    <Rectangle Width="100" Height="20" Fill="#1111"/>
</StackPanel>

, который создает этот вывод:

На черном фоне выглядит совсем иначе: