Question

我一直在为图像上CommandBar的背景颜色和不透明度设置动画，以使其在移动鼠标光标时变得更加不透明。

我用于动画的XAML代码如下：

<Storyboard x:Name="topbagroundfadeinout">
    <DoubleAnimationUsingKeyFrames Storyboard.TargetName="topcmdbar" Storyboard.TargetProperty="Background.Color">
        <EasingDoubleKeyFrame KeyTime="0" Value="Transparent" />
        <EasingDoubleKeyFrame KeyTime="0:0:1" Value="Black" />
        <EasingDoubleKeyFrame KeyTime="0:0:4" Value="Black" />
        <EasingDoubleKeyFrame KeyTime="0:0:6" Value="Transparent" />
    </DoubleAnimationUsingKeyFrames>
</Storyboard>

C＃事件处理程序如下所示：

private void raiseopacity(object s, PointerRoutedEventArgs e)
{
    if (topcmdbarfadeinout.GetCurrentState()!=ClockState.Active)
    {              
        topcmdbarfadeinout.Begin();
        topbagroundfadeinout.Begin();
    }
}

如果仅包含淡入/淡出的效果，则一切正常。但是，一旦取消注释背景颜色动画的XAML代码，程序便会编译，但是执行会因奇怪的错误而崩溃

无法从文本“透明”创建“ Windows.Foundation.Double”。 [线：0位置：0]

有人知道怎么了吗？还是有人有更好的方法来做到这一点？

Answer 1

DoubleAnimation用于double数据类型。相反，在这种情况下，您要对Windows.UI.Color进行动画处理，该动画具有专用的ColorAnimation及其EasingColorKeyFrame元素。

此外，您可能需要将Storyboard.TargetProperty修改为(CommandBar.Background).(SolidColorBrush.Color)，因为它是一个复杂的属性。

<Storyboard x:Name="topbagroundfadeinout">
    <ColorAnimationUsingKeyFrames Storyboard.TargetName="topcmdbar" 
     Storyboard.TargetProperty="(CommandBar.Background).(SolidColorBrush.Color)">
        <EasingColorKeyFrame KeyTime="0" Value="Transparent" />
        <EasingColorKeyFrame KeyTime="0:0:1" Value="Black" />
        <EasingColorKeyFrame KeyTime="0:0:4" Value="Black" />
        <EasingColorKeyFrame KeyTime="0:0:6" Value="Transparent" />
    </ColorAnimationUsingKeyFrames>
</Storyboard>

还要注意，Transparent颜色实际上是不透明度为0的白色。这可能被证明是一个问题，因为动画本质上将从白色渐变为黑色，而不是从不可见的黑色渐变为黑色。我在on my blog中写了更多有关此的内容。

根据您的情况，最好手动指定透明黑色，而不要手动指定Transparent：

<Storyboard x:Name="topbagroundfadeinout">
    <ColorAnimationUsingKeyFrames Storyboard.TargetName="topcmdbar" 
     Storyboard.TargetProperty="(CommandBar.Background).(SolidColorBrush.Color)">
        <EasingColorKeyFrame KeyTime="0" Value="#00000000" />
        <EasingColorKeyFrame KeyTime="0:0:1" Value="Black" />
        <EasingColorKeyFrame KeyTime="0:0:4" Value="Black" />
        <EasingColorKeyFrame KeyTime="0:0:6" Value="#00000000" />
    </ColorAnimationUsingKeyFrames>
</Storyboard>

尽管在所有情况下差异并不明显，但您可以尝试两种解决方案，以查看哪种方法更适合您的预期用途。

UWP中CommandBar的动画背景颜色崩溃

1 个答案: