Duration of ScalarKeyFrameAnimation got shorter

Question

Hi, I try to create a "ScalarKeyFrameAnimation" with the following code, at the first try, when I only toggle on-off one. The animation starts and stops as the way of the 'rotation' animation object config, but then when trying a few time, I notice that the Visual rotate slower and slower, then stop. Like in the GIF

I have moved the creation of the rotation animation on the Page_Loaded event. So that it could only create once. But then nothing change

    private Compositor compositor = Window.Current.Compositor;
    private Visual backvisual;        

    private void Page_Loaded(object sender, RoutedEventArgs e)
    {
        backvisual = ElementCompositionPreview.GetElementVisual(FanIcon);

        backvisual.Size = new Vector2(100, 100);
        backvisual.CenterPoint = new Vector3(backvisual.Size / 2, 0);

        rotate = compositor.CreateScalarKeyFrameAnimation();
        rotate.InsertKeyFrame(1f, 360, compositor.CreateLinearEasingFunction());
        rotate.Duration = TimeSpan.FromMilliseconds(1000);
        rotate.IterationBehavior = AnimationIterationBehavior.Forever;

    }




    private void ToggleFanSec1_Toggled(object sender, RoutedEventArgs e)
    {
        if (ToggleFanSec1.IsOn == true)
        {
            backvisual.StartAnimation(nameof(Visual.RotationAngleInDegrees), rotate);
        }
        else
        {
            backvisual.StopAnimation(nameof(Visual.RotationAngleInDegrees));
        }
    }[![enter image description here][1]][1]

Answer 1

You should add a key frame of the initial state, it's hard to location without initial state and easy to be chaos. You can change the code like below. It means the rotation animates from 0 to 360 over time.

rotate = compositor.CreateScalarKeyFrameAnimation();
rotate.InsertKeyFrame(0f, 0);
rotate.InsertKeyFrame(1f, 360, compositor.CreateLinearEasingFunction());
rotate.Duration = TimeSpan.FromMilliseconds(4000);
rotate.IterationBehavior = AnimationIterationBehavior.Forever;