当我在按钮上移动鼠标时发现奇怪的效果时,我正在使用一些简单的动画 . 背景的颜色似乎变暗,然后再次变亮,但动画代码并没有让它做到这一点 . 这是代码的精简版本,展示了这种奇怪的效果:
<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 回答
当您将不透明的白色设置为越来越透明的灰色或黑色时,颜色首先变得越来越灰,但在某一点上,白色背景开始越来越亮,因此最终(在
#00000000
处)只剩下白色背景 .尝试这个时,效果并不是很奇怪:
这会创建此输出:
它在黑色背景上看起来完全不同: