Notification lag

Describe the bug Notification card animation is flickering and lagging when lower animation duration is set

To Reproduce Steps to reproduce the behavior:

1. Override notification manager and notification card style with this:

<Styles xmlns="https://github.com/avaloniaui"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
		xmlns:v="clr-namespace:SmartMirror.Views;assembly=SmartMirror">

	<Design.PreviewWith>
		<v:NotificationView/>
	</Design.PreviewWith>
	
	<Style Selector="WindowNotificationManager">
		<Setter Property="VerticalAlignment" Value="Top"/>
		<Setter Property="HorizontalAlignment" Value="Center"/>
	</Style>

	<Style Selector="NotificationCard">
		<Setter Property="Template">
			<ControlTemplate>
				<LayoutTransformControl Name="PART_LayoutTransformControl" UseRenderTransform="True">
					<Border CornerRadius="{DynamicResource ControlCornerRadius}" BoxShadow="0 6 8 0 #4F000000" Margin="5 5 5 10">
						<Border Background="{TemplateBinding Background}"
								BorderBrush="{TemplateBinding BorderBrush}"
								BorderThickness="{TemplateBinding BorderThickness}"
								CornerRadius="{DynamicResource ControlCornerRadius}" ClipToBounds="True">
							<DockPanel>
								<ContentControl Name="PART_Content" Content="{TemplateBinding Content}" />
							</DockPanel>
						</Border>
					</Border>
				</LayoutTransformControl>
			</ControlTemplate>
		</Setter>

		<Style.Animations>
			<Animation Duration="0:0:0.3" Easing="SineEaseIn" FillMode="Forward">
				<KeyFrame Cue="0%">
					<Setter Property="Opacity" Value="0"/>
					<Setter Property="TranslateTransform.Y" Value="-100"/>
					<Setter Property="ScaleTransform.ScaleX" Value="1"/>
					<Setter Property="ScaleTransform.ScaleY" Value="1"/>
				</KeyFrame>
				<KeyFrame Cue="100%">
					<Setter Property="Opacity" Value="1"/>
					<Setter Property="TranslateTransform.Y" Value="0"/>
					<Setter Property="ScaleTransform.ScaleX" Value="1"/>
					<Setter Property="ScaleTransform.ScaleY" Value="1"/>
				</KeyFrame>
			</Animation>
		</Style.Animations>
	</Style>

	<Style Selector="NotificationCard[IsClosing=true] /template/ LayoutTransformControl#PART_LayoutTransformControl">
		<Style.Animations>
			<Animation Duration="0:0:0.3" Easing="SineEaseOut" FillMode="Backward">
				<KeyFrame Cue="0%">
					<Setter Property="Opacity" Value="1"/>
					<Setter Property="TranslateTransform.X" Value="0"/>
					<Setter Property="TranslateTransform.Y" Value="0"/>
				</KeyFrame>
				<KeyFrame Cue="100%">
					<Setter Property="Opacity" Value="0"/>
					<Setter Property="TranslateTransform.X" Value="0"/>
					<Setter Property="TranslateTransform.Y" Value="-100"/>
				</KeyFrame>
			</Animation>
		</Style.Animations>
	</Style>
	
</Styles>

1. Display some notifications on other than UI thread:

Thread.Sleep(1500);
RaiseNotification(mainWindow, "Error", "An error occured");
Thread.Sleep(1500);
RaiseNotification(mainWindow, "WELCOME", "Welcome");
Thread.Sleep(1500);
RaiseNotification(mainWindow, "Test", "Testing notifications");

1. Dispatch on UI thread:

public static void RaiseNotification(MainWindowViewModel mainWindow, string title, string message)
{
    Dispatcher.UIThread.InvokeAsync(() =>
    {
        mainWindow.NotificationManager.Show(new NotificationViewModel() { Title = title, Message = message });
    });
}

1. You sholud see flickering notification on slide down

Expected behavior To not flicker and lag

Screenshots

https://user-images.githubusercontent.com/48392523/109436175-a9203580-7a1e-11eb-92f0-9b90ed6aaa3f.mp4

Desktop (please complete the following information):

• OS: Windows
• Version 0.10.0

[B8ightY]

That’s cool! But in meantime I found better hack for this problem… Just set opacity to start increasing a bit later so the notifications look visually faster… have a look on this code snippet:

<Style.Animations>
	<Animation Duration="0:0:0.45" Easing="SineEaseIn" FillMode="Forward">
		<KeyFrame Cue="0%">
			<Setter Property="Opacity" Value="0"/>
			<Setter Property="ZIndex" Value="0"/>
			<Setter Property="TranslateTransform.Y" Value="-100"/>
			<Setter Property="ScaleTransform.ScaleX" Value="1"/>
			<Setter Property="ScaleTransform.ScaleY" Value="1"/>
		</KeyFrame>
		<KeyFrame Cue="30%">
			<Setter Property="Opacity" Value="0"/>
		</KeyFrame>
		<KeyFrame Cue="99%">
			<Setter Property="ZIndex" Value="0"/>
		</KeyFrame>
		<KeyFrame Cue="100%">
			<Setter Property="Opacity" Value="1"/>
			<Setter Property="ZIndex" Value="1"/>
			<Setter Property="TranslateTransform.Y" Value="0"/>
			<Setter Property="ScaleTransform.ScaleX" Value="1"/>
			<Setter Property="ScaleTransform.ScaleY" Value="1"/>
		</KeyFrame>
	</Animation>
</Style.Animations>

I also set Z-index to increase just before animation is completed so new notification does not overlap the already displayed one…

Despite of fact that this solution works the bug itself still persist so I leave this issue open and maybe it will get resolved by someone later

[workgroupengineering]

To understand if the animation is actually applied several times, I added the following lines of code to the animatio class:

        private string _name = "Default";
        /// <summary>
        /// Defines the <see cref="SpeedRatio"/> property.
        /// </summary>
        public static readonly DirectProperty<Animation, string> NameProperty =
            AvaloniaProperty.RegisterDirect<Animation, string>(
                nameof(Name),
                o => o._name,
                (o, v) => o._name = v,
                defaultBindingMode: BindingMode.TwoWay);

        public string Name 
        {
            get => _name;
            set
            {
                SetAndRaise(NameProperty, ref _name, value);
            }
        }

        public IDisposable Apply(Animatable control, IClock clock, IObservable<bool> match, Action onComplete)
        {
            System.Diagnostics.Debug.WriteLine($"{control} Apply animation {this._name}");
            ....
            return new CompositeDisposable(subscriptions);
        }

and actually in the windows output you can see:

Avalonia.Controls.Notifications.NotificationCard Apply animation Default
Avalonia.Controls.Notifications.NotificationCard Apply animation Default
Avalonia.Controls.Notifications.NotificationCard Apply animation MyAniIn
Avalonia.Controls.LayoutTransformControl Apply animation Default
Avalonia.Controls.LayoutTransformControl Apply animation MyAniOut