Trouble with animations

[vadd98]

I'm porting an app from WinUI to Avalonia and I'm having some trouble to port animations.
On WinUI I have an animation that is triggered when login fails and makes the two TextBox and the Button red for an half of second and then reverts to its original state:

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

I just trigger it from code using LoginFailedAnimation.Begin().

On Avalonia I have something like this:

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

At the moment, in order to trigger the animation I change the Classes property of the two TextBox and of the Button from code, by the way at the end of the animation I have to change back the Classes property to the original style. In order to do so, I have to use a timer that waits 1 sec and then revert the Classes property, by the way I think it is a poor approach.

Is there something better to achieve this behaviour? Am I missing something obvious?

[maxkatz6]

I would expect some property in the view model that defines if last login was failed, and update class with its value. Without timers or something.

As an alternative way you can move all setters to the Animation instance, and store it in the resources, in same way as you store Storyboard in the UWP. Later you can run this animation in following way animation.RunAsync(control). But I probably wouldn't recommend this approach, because it's not natural to css-like animations.

[vadd98]

Thanks for your suggestion. By the way I'm still having trouble with the code behind using classes.
At the moment I have:

            EmailField.Classes.Add("FailedLogin");
            PasswordField.Classes.Add("FailedLogin");
            LoginButton.Classes.Add("FailedLogin");

            await Task.Delay(1000);
            
            EmailField.Classes.Remove("FailedLogin");
            PasswordField.Classes.Remove("FailedLogin");
            LoginButton.Classes.Remove("FailedLogin");

because if I don't remove those classes I can't add them again in case I have to trigger the animation for a second time.
I also need to await the completion of the animation before remove the classes.
Have you any suggestion?

By the way I also tried to move the animation in resources as you suggested as an alternative way, but I receive a build error, so I think I'm doing something wrong. I did something like this:

<Grid.Resources>
    <Animation x:Key="FailedLogin" Duration="0:0:0.5" PlaybackDirection="Alternate" IterationCount="2"> 
        <KeyFrame Cue="100%">
            <Setter Property="Background" Value="{DynamicResource Red}"/>
            <Setter Property="BorderBrush" Value="{DynamicResource Red}"/>
        </KeyFrame>
    </Animation>
</Grid.Resources>

[maxkatz6]

Have you any suggestion?

I already suggested, that you can avoid delays, if you change behavior of your app, defining property IsFailled or HasErrors in the view model, and on this property changed update classes in the view.

[maxkatz6]

but I receive a build error, so I think I'm doing something wrong. I did something like this:

Interesting, it seems in xaml animation is not supported without styles.
You can create animations from code behind instead https://github.com/AvaloniaUI/Avalonia/blob/master/tests/Avalonia.Animation.UnitTests/AnimationIterationTests.cs#L18

[vadd98]

I'm sorry, I saw your suggestion before but I was trying to avoid to add a new property to my code, I should have write it before.
By the way another solution came to me. When login fails, it is enough to do so:

            EmailField.Classes.Remove("FailedLogin");
            PasswordField.Classes.Remove("FailedLogin");
            LoginButton.Classes.Remove("FailedLogin");

            EmailField.Classes.Add("FailedLogin");
            PasswordField.Classes.Add("FailedLogin");
            LoginButton.Classes.Add("FailedLogin");

so each time it fails, it removes and add agains the Failed animation.
I'm feeling pretty dumb to haven't think about this solution before 😂

By the way, thank you very much for your suggestions