代码之家  ›  专栏  ›  技术社区  ›  Sheridan

半透明颜色的动画有奇怪的效果

  •  0
  • Sheridan  · 技术社区  · 6 年前

    我正在做一些简单的动画,当我注意到一个奇怪的效果时,移动鼠标在一个按钮上。背景的颜色似乎变暗了,然后又变亮了,但动画代码并没有让它这样做。下面是代码的精简版本,演示了这种奇怪的效果:

    <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>
    

    请注意,在本例中,我将动画的速度减慢,以使这个奇怪的效果更清晰。在实验之后,我发现如果我使用较深的颜色来设置动画,那么动画将直接转到该颜色(正常工作)。我还注意到,如果我将alpha通道设置为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" />
    

    现在,您应该看到预期的效果。这是我最后不得不做的,但我真的想用半透明的颜色代替。所以,我的问题是 ?

    1 回复  |  直到 6 年前
        1
  •  1
  •   Clemens    6 年前

    当您将不透明的白色设置为越来越透明的灰色或黑色时,颜色首先变得越来越灰色,但在某个点白色背景开始越来越亮,因此最后(在 #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>
    

    enter image description here

    它在黑色背景上看起来完全不同:

    enter image description here