如何在 Avalonia 上模拟 WinUI stroyboard 动画？

问题描述

我正在将应用程序从 WinUI 移植到 Avalonia，但在移植动画时遇到了一些问题。 在 WinUI 上，我有一个在登录失败时触发的动画，并使两个文本框和按钮变为红色半秒，然后恢复到其原始状态：

            <Grid.Resources>
                <Storyboard x:Name="LoginFailedAnimation" AutoReverse="True">
                    <ColorAnimation Storyboard.TargetName="EmailField"                                
                            Storyboard.TargetProperty="(TextBox.Background).(SolidColorBrush.Color)"
                            To="Red" Duration="0:0:0.5"/>
                    <ColorAnimation Storyboard.TargetName="EmailField" 
                                    Storyboard.TargetProperty="(TextBox.BorderBrush).(SolidColorBrush.Color)"
                                    To="Red" Duration="0:0:0.5"/>
                    <ColorAnimation Storyboard.TargetName="PasswordField" 
                                    Storyboard.TargetProperty="(PaswordBox.Background).(SolidColorBrush.Color)"
                                    To="Red" Duration="0:0:0.5"/>
                      <ColorAnimation Storyboard.TargetName="PasswordField" 
                            Storyboard.TargetProperty="(PaswordBox.BorderBrush).(SolidColorBrush.Color)"
                            To="Red" Duration="0:0:0.5"/>
                    <ColorAnimation Storyboard.TargetName="LoginButton" 
                            Storyboard.TargetProperty="(Button.Background).(SolidColorBrush.Color)"
                            To="Red" Duration="0:0:0.5"/>
                    <ColorAnimation Storyboard.TargetName="LoginButton" 
                            Storyboard.TargetProperty="(Button.Foreground).(SolidColorBrush.Color)"
                            To="White" Duration="0:0:0.5"/>
                </Storyboard>
            </Grid.Resources>

我只是使用 LoginFailedAnimation.Begin() 从代码中触发它。

在阿瓦隆尼亚我有这样的事情：

            <Grid.Styles>
                <Style Selector="TextBox.FailedLogin">
                    <Setter Property="Height" Value="100"/>
                    <Setter Property="Width" Value="100"/>
                    <Setter Property="Background" Value="Red"/>
                    <Style.Animations>
                        <Animation Duration="0:0:0.5" PlaybackDirection="Alternate" IterationCount="1"> 
                            <KeyFrame Cue="100%">
                                <Setter Property="Background" Value="{DynamicResource Red}"/>
                                <Setter Property="BorderBrush" Value="{DynamicResource Red}"/>
                            </KeyFrame>
                        </Animation>
                    </Style.Animations>
                </Style>

                <Style Selector="Button.FailedLogin">
                    <Setter Property="Height" Value="100"/>
                    <Setter Property="Width" Value="100"/>
                    <Setter Property="Background" Value="Red"/>
                    <Style.Animations>
                        <Animation Duration="0:0:0.5" PlaybackDirection="Alternate" IterationCount="1"> 
                            <KeyFrame Cue="100%">
                                <Setter Property="Background" Value="{DynamicResource Red}"/>
                                <Setter Property="Foreground" Value="White"/>
                            </KeyFrame>
                        </Animation>
                    </Style.Animations>
                </Style>
            </Grid.Styles>

目前，为了触发动画，我从代码中更改了两个 TextBox 和 Button 的 Classes 属性，顺便说一下，在动画结束时，我必须将 Classes 属性改回原始样式.为此，我必须使用一个等待 1 秒然后恢复 Classes 属性的计时器，顺便说一下，我认为这是一种糟糕的方法。

有什么更好的方法可以实现这种行为吗？我是否遗漏了一些明显的东西？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）