半透明色的动画效果很奇怪

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了半透明色的动画效果很奇怪相关的知识,希望对你有一定的参考价值。

当我在按钮上移动鼠标时发现奇怪的效果时,我正在使用一些简单的动画。背景的颜色似乎变暗,然后再次变亮,但动画代码并没有让它做到这一点。这是代码的精简版本,展示了这种奇怪的效果:

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

现在,您应该看到所需的效果。这是我最后要做的,但我真的想用半透明的颜色代替。所以,我的问题是有人知道在使用半透明颜色制作动画时会出现什么问题,我该如何解决?

答案

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

以上是关于半透明色的动画效果很奇怪的主要内容,如果未能解决你的问题,请参考以下文章

在 UITableViews 中设置导航栏半透明以启动动画

如何禁用深色透明色的背景视图?

图片格式

Android中实现圆角矩形及半透明效果。

iOS7.x中clipsToBounds时UIToolBar失去半透明

Android 4.4 — 半透明状态/导航栏 — fitSystemWindows/clipToPadding 不能通过片段事务工作