Wpf 半透明颜色的动画具有奇怪的效果
我正在制作一些简单的动画,当我把鼠标移到一个按钮上时,我注意到一个奇怪的效果。背景的颜色似乎变暗了,然后又变亮了,但动画代码并没有让它这样做。下面是代码的精简版本,演示了这种奇怪的效果:Wpf 半透明颜色的动画具有奇怪的效果,wpf,animation,colors,transparency,Wpf,Animation,Colors,Transparency,我正在制作一些简单的动画,当我把鼠标移到一个按钮上时,我注意到一个奇怪的效果。背景的颜色似乎变暗了,然后又变亮了,但动画代码并没有让它这样做。下面是代码的精简版本,演示了这种奇怪的效果: <Window x:Class="WpfApp1.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winf
<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" />
现在,您应该看到所需的效果。这是我最后不得不做的,但我真的想用半透明的颜色来代替。所以,我的问题是,有人知道在使用半透明颜色设置动画时出现了什么问题吗?我该如何修复它?当您将不透明的白色设置为越来越透明的灰色或黑色时,颜色首先变得越来越灰,但在某一点上,白色背景开始越来越亮,最后(在
#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>
这将创建此输出:
它在黑色背景下看起来完全不同:
一如既往,这是一个很好的解释和演示示例。谢谢你,克莱门斯。
<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>