Translate animation flickers control visibility when using certain easings as of v11.0.6

[billhenn]

Describe the bug

We originally built a feature into our user prompt dialog overlay where if the user clicked into an area outside of the dialog, we would visually "shake" the dialog with a quick animation to indicate the operation wasn't allowed. This was implemented back when we referenced Avalonia v11.0.5 and worked great.

We were about to implement a similar feature in another control in our latest codebase that now targets v11.0.7+ and found that the animation is causing the control to flicker visibility. After digging in, we found that BackEaseIn, BackEaseInOut, ElasticEaseIn, and ElasticEaseInOut all cause the issue starting in Avalonia v11.0.6 and it is easily reproduced.

To Reproduce

Add the following XAML to a project and check the CheckBox to trigger the animation. You will see the button flicker visibility at times the easing (if it is BackEaseIn, BackEaseInOut, ElasticEaseIn, or ElasticEaseInOut) drops below the bottom line in the charts here:

https://docs.avaloniaui.net/docs/reference/animation-settings

This all worked fine in v11.0.5, but some change in v11.0.6 broke it. The bug is present from v11.0.6 through the current master.

This animation shows the issue in action:

Whereas here in v11.0.5 is how it should look:

<StackPanel>
	<Panel Width="300" Height="200" HorizontalAlignment="Left" Background="LightGray">
		<Button x:Name="shakeButton" IsEnabled="False" Content="Shakes When Enabled" HorizontalAlignment="Center" VerticalAlignment="Center">
			<Button.Theme>
				<ControlTheme TargetType="Button">
					<Setter Property="Template">
						<ControlTemplate>
							<Border BorderBrush="Black" BorderThickness="1" Background="White" Padding="20">
								<ContentPresenter Content="{TemplateBinding Content}" />
							</Border>
						</ControlTemplate>
					</Setter>

					<Style Selector="^:disabled">
						<Setter Property="TextElement.Foreground" Value="LightGray" />
					</Style>

					<Style Selector="^:not(:disabled)">
						<Setter Property="TextElement.Foreground" Value="Blue" />
						<Style.Animations>
							<Animation FillMode="Both" Duration="0:0:1">
								<Animation.Easing>
								<!--
									The following easing have flicker issues, which is every
									easing that drops below the bottom line in the charts here: https://docs.avaloniaui.net/docs/reference/animation-settings
											
									<BackEaseIn/>
									<BackEaseInOut/>
									<ElasticEaseIn />
									<ElasticEaseInOut />
								-->
									<ElasticEaseInOut/>
								</Animation.Easing>
								<KeyFrame Cue="0%">
									<Setter Property="TranslateTransform.Y" Value="0" />
								</KeyFrame>
								<KeyFrame Cue="50%">
									<Setter Property="TranslateTransform.Y" Value="-10" />
								</KeyFrame>
								<KeyFrame Cue="100%">
									<Setter Property="TranslateTransform.Y" Value="0" />
								</KeyFrame>
							</Animation>
						</Style.Animations>
					</Style>

				</ControlTheme>
			</Button.Theme>
		</Button>
	</Panel>
	<TextBlock TextWrapping="Wrap">Check the box to enable the button and trigger an aimation.  BackEaseIn, BackEaseInOut, ElasticEaseIn, and ElasticEaseInOut all cause issues.</TextBlock>
	<CheckBox IsChecked="{Binding #shakeButton.IsEnabled}" Content="Is enabled" />
</StackPanel>

Expected behavior

The animation should move the button correctly even when the easing temporarily puts the animated control out of range of the normal values, and no visibility flickering should occur. This worked in v11.0.5.

Avalonia version

v11.0.6 and later

OS

Windows

Additional context

No response