Unexpected animation outcome if `SpeedRatio` or `PlaybackDirection` properties change

[timiimit-tam]

Describe the bug

Changing SpeedRatio and PlaybackDirection properties while animation is running, snaps it into state that animation would be in if properties had new values since the beginning of the animation.

To Reproduce

Here is a minimal repro which showcases the issue:

• git clone https://github.com/timiimit-tam/AvaloniaAnimationSpeedRatioTest.git
• Open in Visual Studio
• Press F5
• In the window that opens move slider to the right, and then quickly back to the left

Expected behavior

In general, my expectation is that changing SpeedRatio and PlaybackDirection only affect the animation progression from that point onwards and doesn't affect current progress of the animation. Current progress of animation before and after properties change should remain constant.

In terms of repo above, my expectation is that when moving slider from right to left, it should be impossible to make the rotating text rotate anti-clockwise. Text should at all times be rotating clockwise, only the speed of clockwise rotation should change.

Avalonia version

11.3.8, master branch as of 2 weeks ago

OS

No response

Additional context

To make this issue more approachable I'm adding code and screenshot showing example of this issue as seen in the repo I linked above.

Here is relevant part of XAML for a text that rotates clockwise infinitely.

	<Window.Styles>
        <!-- TextBlock style with animated rotation -->
		<Style Selector="TextBlock">
			<Style.Animations>
				<Animation Duration="0:0:1" IterationCount="INFINITE" SpeedRatio="{Binding SpeedRatio}">
					<KeyFrame Cue="0%">
						<Setter Property="RotateTransform.Angle" Value="0.0" />
					</KeyFrame>
					<KeyFrame Cue="100%">
						<Setter Property="RotateTransform.Angle" Value="360.0" />
					</KeyFrame>
				</Animation>
			</Style.Animations>
		</Style>
	</Window.Styles>

	<Grid>
        <TextBlock Text="{Binding Greeting}" HorizontalAlignment="Center" VerticalAlignment="Center"/>
	    <Slider Value="{Binding SpeedRatio, Mode=OneWayToSource}" Minimum="0" Maximum="2" />
    </Grid>

If slider moves from right-to-left fast enough, it is possible to make text spin anti-clockwise.

If there is any other way of making animations where speed and direction is changing, please let me know.

I have already created a PR that fixes this issue 3 weeks ago, but I'm now opening an issue because I got no response there. If there's a better way of implementing, feel free to close that PR and I can try implementing it in your prefered way.