UWP 动画不再同时播放答案

【问题标题】：UWP animations not playing simultaneously anymoreUWP 动画不再同时播放
【发布时间】：2019-12-18 18:41:51
【问题描述】：

自从将 Windows 10 更新到 1909 后，我在 UWP 应用中遇到了一些非常奇怪的问题。我有一个如下所示的 XAML 动画：

<Storyboard x:Key="showRightAnswer" x:Name="showRightAnswer">
            <ColorAnimationUsingKeyFrames Storyboard.TargetName="answerContainer" Storyboard.TargetProperty="(UIElement.Background).(SolidColorBrush.Color)">
                <LinearColorKeyFrame KeyTime="0:0:0" Value="Transparent"/>
                <LinearColorKeyFrame KeyTime="0:0:2" Value="#32E662"/>
            </ColorAnimationUsingKeyFrames>
            <ColorAnimationUsingKeyFrames Storyboard.TargetName="answerContainer" Storyboard.TargetProperty="(UIElement.BorderBrush).(SolidColorBrush.Color)">
                <LinearColorKeyFrame KeyTime="0:0:0" Value="#EBEBEB"/>
                <LinearColorKeyFrame KeyTime="0:0:2" Value="#32E662"/>
            </ColorAnimationUsingKeyFrames>
            <ColorAnimationUsingKeyFrames Storyboard.TargetName="answer" Storyboard.TargetProperty="(UIElement.Foreground).(SolidColorBrush.Color)">
                <LinearColorKeyFrame KeyTime="0:0:0" Value="#787979"/>
                <LinearColorKeyFrame KeyTime="0:0:2" Value="#FFFFFF"/>
            </ColorAnimationUsingKeyFrames>
</Storyboard>

当点击按钮时，故事板在代码后面启动。按钮定义如下：

<Button x:Name="answerMainContainer" Tapped="AnswerMainContainer_Tapped" HorizontalAlignment="Center" VerticalAlignment="Center" Height="52" Background="Transparent" Margin="0 0 0 20" Padding="0" MaxWidth="520" MinWidth="180" Style="{StaticResource TransparentButton}">
        <Button.RenderTransform>
            <CompositeTransform TranslateX="0"/>
        </Button.RenderTransform>
        <Border x:Name="answerContainer" VerticalAlignment="Center" HorizontalAlignment="Center" Background="Transparent" BorderBrush="#EBEBEB" BorderThickness="2" Height="48" CornerRadius="24" MaxWidth="520" Padding="10" Margin="0" MinWidth="180">
            <TextBlock x:Name="answer" Text="{Binding Response}" Foreground="#787979" FontSize="16" FontFamily="{ThemeResource Regular}" VerticalAlignment="Center" HorizontalAlignment="Center" TextWrapping="NoWrap" TextTrimming="CharacterEllipsis"/>
        </Border>
</Button>

我的问题是 3 色动画没有同步播放，我不知道为什么。我看不到来自 XAML 的任何问题。因此，如果有人对此有所了解，我会非常高兴。提前致谢！

P.S：我运行的是 Windows 10 1909。

安装的 NuGet 包是：

Microsoft.NETCore.UniversalWindowsPlatform v6.2.9
Win2D.uwp v1.24.0
Microsoft.Toolkit.Uwp.UI.Animations v6.0.0
Microsoft.Toolkit.Uwp.UI.Controls v6.0.0

编辑： here is video example of rendering

社区测试结果

【问题讨论】：

我测试了上面的代码，效果很好，可以分享一个关于你的问题的视频吗？
@NicoZhu-MSFT 链接到上传的视频。我将关键时间从 2 秒更改为 0.2 秒，因为不好的效果更加明显。感谢观看
对不起，我想不通 3 色动画没有与您的视频同步播放。
查看带有 2s 动画的新视频，如我的答案中显示的代码所示。 Borderbrush 首先是动画。然后发短信。最后按钮的背景颜色甚至没有线性效果......
问题只出现在1909年？我在 1909 年进行了测试，请检查我在您的问题中的屏幕截图。

标签： c# .net animation uwp

【解决方案1】：

好的，在检查另一个系统后，我遇到了同样的问题。但是，在将背景起始值和动画值的透明颜色更改为纯白色后，问题似乎得到了解决。

所以我猜要么是透明颜色和标准颜色动画有问题，要么我的两个系统配置都损坏了；）。

所以现在，我的解决方案是： 将透明色改为纯色

感谢您的帮助。

【讨论】：