Animations start with a one-frame delay in Avalonia 11

[TomEdwardsEnscape]

Describe the bug As of Avalonia 11 preview 1, controls are rendered for a single frame before animations begin. This is very noticeable if the animation is fading the control in by changing its opacity.

This does not happen in Avalonia 0.10.18

To Reproduce Paste the following XAML into a new window, run it, and click the button:

<Grid RowDefinitions="Auto,*">
    <ToggleButton Name="Toggle">Begin animation</ToggleButton>
    <Border Grid.Row="1" Background="Red" IsVisible="{Binding IsChecked, ElementName=Toggle}">
        <Border.Styles>
            <Style Selector="Border[IsVisible=true]">
                <Style.Animations>
                    <Animation Duration="0:0:1">
                        <KeyFrame Cue="0%">
                            <Setter Property="Opacity" Value="0.0"/>
                        </KeyFrame>
                        <KeyFrame Cue="90%">
                            <Setter Property="Opacity" Value="0.0"/>
                        </KeyFrame>
                        <KeyFrame Cue="100%">
                            <Setter Property="Opacity" Value="1.0"/>
                        </KeyFrame>
                    </Animation>
                </Style.Animations>
            </Style>
        </Border.Styles>
    </Border>
</Grid>

You will see the red border flicker on-screen as soon as the button is clicked.

Expected behavior When the control's becomes visible its opacity is immediately set to zero, and no red border is drawn until the animation starts to raise the opacity value (after 900ms).

Desktop (please complete the following information):

• OS: Windows
• Version: 11 preview 1

[kekekeks]

@jmacato

[amwx]

I figured out if you add a setter to the style setting the opacity to 0 the animation runs as expected:

<Style Selector="Border[IsVisible=true]">
    <Setter Property="Opacity" Value="0" />
    ....
</Style>

I wonder if this was an unintended side effect of the styling system changes for 11.0 rather than rendering that cause animations to be delayed 1 value frame in a style trigger?

[kekekeks]

It happens because animation timer is desynchronized from preparing the next frame. We'll be introducing something similar to WPF's MediaContext to deal with that.

[grokys]

The first commit to exhibit this behavior was 4b7feeb (#8536) - before that, the animation was broken so it's hard to know if this was the cause of the problem though.

However after checking out 4b7feeb and adding the option to use the old deferred renderer, I see the problem goes away so it does indeed look to be caused by the animation timer issue that @kekekeks mentioned above. ~~That doesn't explain the opacity setter hack though I don't think so more investigation is required.~~ Actually, the opacity setter hack doesn't use the render timer, so it can be explained.

[maxkatz6]

I believe it was fixed after https://github.com/AvaloniaUI/Avalonia/pull/11552 Let me know if it's still reproducible

[TomEdwardsEnscape]

It's fixed. 👍

[TomEdwardsEnscape]

It's broken again in RC2.2 👎

[timunie]

@tomenscape open a new issue in best case with a minimal sample to reproduce. Adding such a comment doesn't help anyone.

[TomEdwardsEnscape]

This is already a bug report containing a reproducible sample. We're going to open a new issue via the paid support channel later today.

[timunie]

Okay, if it's the exact same issue to reproduce, let me open it again.

[TomEdwardsEnscape]

The test case above is working again in 11.0.3.

This one is still broken:

<Animation Delay="0:0:0.3" Duration="0:0:0.2">
    <KeyFrame Cue="0%">
        <Setter Property="Opacity" Value="0.0"/>
    </KeyFrame>
    <KeyFrame Cue="100%">
        <Setter Property="Opacity" Value="1.0"/>
    </KeyFrame>
</Animation>

But the bug can be worked around by adding FillMode="Both" to the animation.

[TomEdwardsEnscape]

Perhaps that animation should produce a flicker though, given that it has a delay? It didn't in 0.10 but perhaps that was a bug.

I've replaced the delay with a three-keyframe curve which keeps the opacity at 0 for 0.3 seconds, and that is working nicely.

[timunie]

@TomEdwardsEnscape do you think this issue should be kept open or can be closed? from your messages I'm unsure rn.

[TomEdwardsEnscape]

Since my product is no longer affected by this problem, as far as I'm concerned the bug can be closed. But you may want to keep it open (or file a new one) depending on what the intended behaviour of the second test case is.

The fact that setting FillMode changes behaviour is also a bit surprising, but maybe I just don't understand what that property is doing.

[jmacato]

@TomEdwardsEnscape I think i need to make a proper docs with FillModes haha :) Some other folks have been confused by it too

[timunie]

@jmacato in that case, should we move this issue into docs instead?

[jmacato]

@timunie i think we can close this and open a new on on docs (i think we already have it iirc)

[timunie]

Closing this in favor of https://github.com/AvaloniaUI/avalonia-docs/issues/134