UWP Animation resets to From state

Question

I have an animation in UWP app which was working (Production Windows Store app) as intended until Windows Update 1809. Something was changed and now the animation resets to From value right after it finished.

Example code:

Animation (rotation):

<Storyboard x:Key="FlipTest">
    <DoubleAnimation
                        Storyboard.TargetName="TestRotation"
                        Storyboard.TargetProperty="RotationY"
                        From="180"
                        To="10"
                        Duration="0:0:1.40"
                        />
</Storyboard>

Animated item:

    <TextBlock Text="Test" FontSize="18">
        <TextBlock.Projection>
            <PlaneProjection x:Name="TestRotation" RotationY="0" />
        </TextBlock.Projection>
    </TextBlock>

Call to start from button click:

private void Button_Click(object sender, RoutedEventArgs e)
{
    Storyboard sb = (Storyboard)Resources["FlipTest"];
    sb.Begin();
}

Intended behavior (works on Windows 1803): When you click on the button, the TextBlock rotated and stays in this state.

Behavior on Windows 1809: The TextBox reset to From (180 deg) value right after the animation finished, but before Storyboard.Completed event called.

Interestingly, if I put To="0", it stays in this state. If I put 10, 190 or 360 degrees, it resets. Note, it resets not to the original state (which is 0deg), but to From value (180deg).

I also updated Microsoft.NETCore.UniversalWindowsPlatform to the latest version (6.1.9), but it changes nothing.

Could anyone explain this behavior or tell how to fix it? Am I missing something obvious?

UPDATE (ugly workaround)

I find out that I can use the following ugly hack:

    sb.Completed += (s, ee) =>
    {
        TestRotation.RotationY = 0.01; // ugly hack for Windows Build 1809
    };

But it looks terrible not only in code. On the screen you can see the terrible blink, because after the animation the item resets and then set again to normal value.

I also noticed that RotationY hold the correct value after animation completed, although visually the item rotated. You can see the value is 0 in code (on complete animation) or in Live Property Explorer, while visually the item rotated to 180 deg.

Answer 1

I believe it's a bug and associated to the FillBehavior of the Storyboard.

This is happening for me all the way back to the first Windows 10 Build 10240. For some reason if the result is != 0 then with FillBehavior.HoldEnd the state is reset to the From value instead of the To value (the value the Storyboard ends with).

Without looking at the open source code (which would be best IMO) I have done the following which leads me to this assumption.

Verified your existing code on builds of Windows all the way back to the first release of Windows 10. Tested both To = 10 and To = 0. To = 10 resets to the starting From value. To = 0 resets to original value. This you've documented already.

Modified From value to be 360 degrees past the To value (using random values) so that it performs a full rotation. It does stop at the From value at this point also which looks like the To value, which only speaks to say that Storyboard.FillBehavior = FillBehavior.HoldEnd holds to the From value. I know it's not Storyboard.FillBehavior = FillBehavior.Stop because this does reset to the initial value before the Storyboard everytime (which is what FillBehavior.Stop is supposed to do).

I'm assuming this based on the various tests I've done including manually writing the Storyboard.

Assumption:

If the Storyboard.FillBehavior = FillBehavior.HoldEnd, and the Storyboard.To value is not 0, then it will hold to whatever the Storyboard.From value was once it has completed.

If the Storyboard.FillBehavior = FillBehavior.Stop then it works as expected and returns to whatever state the value was in before the animation.

Suggested work around:

Although I see you have a work around by using the Storyboard.Completed event, I have also another alternative (although it's still not pleasant) which may be cleaner and remove the flickering; it worked for me.

I have set the Timelines with FillBehavior.Stop that are affected and then I've set the initial value of the properties they are animating to the To value.

Note: In your example your DoubleAnimation.Duration is greater than your Storyboard.Duration. This will always cause it to reset to this start value (which in this case is the From value) as the DoubleAnimation never gets to complete. Make sure your Storyboard.Duration is at least as long as your highest child Timeline to prevent flickering and undesired effects.

I initially assumed this was your problem but after setting the Storyboard to match, or better, your issue still exists. Just know that the difference in durations could result in unwanted results, especially when your Storyboard is shorter than your child Timeline(s).

<Storyboard x:Key="FlipTest"
            Duration="0:0:1.40">
    <DoubleAnimation Storyboard.TargetName="TestRotation"
                     Storyboard.TargetProperty="RotationY"
                     From="180"
                     To="10"
                     Duration="0:0:1.40" 
                     FillBehavior="Stop"/>
</Storyboard>


TestRotation.RotationY = 10;
Storyboard sb = (Storyboard)Resources["FlipTest"];
sb.Begin();