动画更改颜色时如何更新UI

Posted 2021-04-13

我正在用C＃编写UWP WinRT应用程序。我发现了非常有用的BitmapIcon类，并将其用于应用程序主页上的图标网格。 BitmapIcon类具有Foreground画笔，可用于覆盖原始位图的颜色，当某些控件将图标颜色与图片本身分开控制时，它很方便（例如服务器指示图标为红色以表明它很重要）。 。

我正在使用情节提要动画来更改图标的颜色（这是我最近不喜欢的闪烁效果，但我被迫这样做）。这是代码：

        ColorAnimationUsingKeyFrames colorAnimation = new ColorAnimationUsingKeyFrames();
        colorAnimation.Duration = TimeSpan.FromSeconds( 3 );
        colorAnimation.EnableDependentAnimation = true;

        IconImage.Foreground = new SolidColorBrush( iconColor ?? AppSettings.appColor );

        DiscreteColorKeyFrame key1 = new DiscreteColorKeyFrame();
        key1.Value = finishColor;
        key1.KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromSeconds( 0 ) );
        colorAnimation.KeyFrames.Add( key1 );

        LinearColorKeyFrame key2 = new LinearColorKeyFrame();
        key2.Value = startColor;
        key2.KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromSeconds( 3.0 ) );
        colorAnimation.KeyFrames.Add( key2 );

        colorAnimation.RepeatBehavior = RepeatBehavior.Forever;

        Storyboard.SetTargetProperty( colorAnimation, "(BitmapIcon.Foreground).Color" );
        Storyboard.SetTarget( colorAnimation, IconImage );

        // Create a storyboard to apply the animation.
        //Storyboard myStoryboard = new Storyboard();
        animationStoryboard.Children.Add( colorAnimation );
        animationStoryboard.Duration = colorAnimation.Duration;
        animationStoryboard.RepeatBehavior = colorAnimation.RepeatBehavior;
        animationStoryboard.Begin();

这似乎有些奏效。我没有例外，颜色确实发生了变化。问题在于更改不会显示在窗口中。如果我调整应用程序窗口的大小，则在拖动窗口边缘时可以看到颜色发生了变化。当我停止操作时，它们停止显示更改，但是更改似乎一直在后台发生。我可以断定背景中的数字在变化，这是因为当我暂时停止更改窗口的大小时发生的颜色跳跃。

自从我从事C＃UWP WinRT代码以来已经有一段时间了，我认为我缺少Imageicon对象的某种属性或属性，它是前景SolidColorBrush或与SolidColorBrush关联的颜色。

在我的代码的其他地方，我使用类似的方法为窗口上的打开和关闭侧边栏设置动画。如预期的那样，效果很好，动画很流畅。

我需要弄清楚为什么似乎会发生颜色变化，但是没有不断更新UI。

答案

为动画更改颜色时如何更新UI

我可以重现此问题，并且我已经与团队讨论过，这是一个错误，我刚刚将其报告给相关团队。您也可以使用Windows反馈中心应用发布此信息。

如果收到有关此的任何信息，我将在下面进行更新。谢谢！

更新

这不理想，因为它涉及2个动画和2个单独的BitmapIcons，我们仅需使用1个Animation并在BitmapIcon后面放置静态图像，便可以根据自己的喜好对其进行调整。请检查以下代码。

<Grid>
    <BitmapIcon
        x:Name="IconImageOne"
        Foreground="Red"
        UriSource="ms-appx:///Assets/StoreLogo.png">
        <BitmapIcon.Resources>
            <Storyboard x:Name="animationStoryboard">
                <DoubleAnimation
                    AutoReverse="True"
                    RepeatBehavior="Forever"
                    Storyboard.TargetName="IconImageOne"
                    Storyboard.TargetProperty="Opacity"
                    From="1.0"
                    To="0.0"
                    Duration="0:0:3" />
                <DoubleAnimation
                    AutoReverse="True"
                    RepeatBehavior="Forever"
                    Storyboard.TargetName="IconImageTwo"
                    Storyboard.TargetProperty="Opacity"
                    From="0.0"
                    To="1.0"
                    Duration="0:0:3" />
            </Storyboard>
        </BitmapIcon.Resources>
    </BitmapIcon>

    <BitmapIcon
        x:Name="IconImageTwo"
        Foreground="Green"
        Tapped="IconImage_Tapped"
        UriSource="ms-appx:///Assets/StoreLogo.png" />
</Grid>

后面的代码

private void StatAnimation()
{

    animationStoryboard.Begin();
}

private void IconImage_Tapped(object sender, TappedRoutedEventArgs e)
{
    StatAnimation();
}

另一答案

我发布此未经测试的答案，因为我认为这是一个可行的选择，并且可能会与我使用的变通方法一样有效（并在我的原始文章中作为评论提及...）>

设置代码以对颜色进行动画处理，以防将来出现问题。然后还添加动画以在1.0到0.99999或其他一些相似的值之间更改BitmapIcon的不透明度。不透明度更改应引起视图/屏幕的刷新，而实际上并未充分改变不透明度以使用户看到它。由于不透明度更新，因此颜色更改将可见。

我没有测试过这个，因为在使用两个Bitmapicon解决方法后我不得不继续前进。