Composition Animation issues

[amwx]

A repro for the first two issues below is found here. Clone this branch of my FluentAvalonia repro and run my FASandbox project.

Issue 1: Flickering at start of Xaml animations

This issue was noted in my ContentDialog/TaskDialogs after moving to 11.0 (they both use the same Xaml animation). At the start of the animation there is a flicker/stutter for a few frames that only happens with the Composition renderer. Note that this doesn't occur every time the animation runs, so in my repro, it may take a few opening/closing attempts to see it. It mostly occurs on open, but I've also seen it on closing too.

This is the animation definition within the ControlTheme - it's just a scale/opacity animation on two of the template components. There's one for when the dialog is opened and closed.

<!--Handle hidden dialog-->
<Style Selector="^:hidden /template/ Panel#LayoutRoot">
    <Style.Animations>
        <Animation Duration="00:00:00.167" FillMode="Forward">
            <KeyFrame Cue="0%">
                <Setter Property="Opacity" Value="1.0"/>
            </KeyFrame>
            <KeyFrame Cue="100%">
                <Setter Property="Opacity" Value="0.0"/>
                <Setter Property="IsVisible" Value="False" />
            </KeyFrame>
        </Animation>
    </Style.Animations>
</Style>
<Style Selector="^:hidden /template/ Border#Container">
    <Style.Animations>
        <Animation Duration="00:00:00.167" FillMode="Forward">
            <KeyFrame Cue="0%">
                <Setter Property="ScaleTransform.ScaleX" Value="1.0"/>
                <Setter Property="ScaleTransform.ScaleY" Value="1.0"/>
            </KeyFrame>
            <KeyFrame Cue="100%" KeySpline="0,0 0,1">
                <Setter Property="ScaleTransform.ScaleX" Value="1.05"/>
                <Setter Property="ScaleTransform.ScaleY" Value="1.05"/>
            </KeyFrame>
        </Animation>
    </Style.Animations>
</Style>

<!--Handle open dialog-->
<Style Selector="^:open /template/ Panel#LayoutRoot">
    <Setter Property="IsVisible" Value="True"/>
    <Style.Animations>
         <!--Animation applies with priority of LocalValue
         To overrule the IsVisible=False in :hidden, set
         IsVisible=True in BOTH KeyFrames here--> 
        <Animation Duration="00:00:00.250" FillMode="Forward">
            <KeyFrame Cue="0%">
                <Setter Property="IsVisible" Value="True"/>
                <Setter Property="Opacity" Value="0.0"/>
            </KeyFrame>
            <KeyFrame Cue="100%">
                <Setter Property="IsVisible" Value="True"/>
                <Setter Property="Opacity" Value="1.0"/>
            </KeyFrame>
        </Animation>
    </Style.Animations>
</Style>
<Style Selector="^:open /template/ Border#Container">
    <Style.Animations>
        <Animation Duration="00:00:00.250" FillMode="Forward">
            <KeyFrame Cue="0%">
                <Setter Property="ScaleTransform.ScaleX" Value="1.05"/>
                <Setter Property="ScaleTransform.ScaleY" Value="1.05"/>
            </KeyFrame>
            <KeyFrame Cue="100%" KeySpline="0,0 0,1">
                <Setter Property="ScaleTransform.ScaleX" Value="1.00"/>
                <Setter Property="ScaleTransform.ScaleY" Value="1.00"/>
            </KeyFrame>
        </Animation>
    </Style.Animations>
</Style>

Issue 2: Multiple CompositionAnimations on the same CompositionVisual sometimes doesn't run

This comes from my most recent WinUI port of the TeachingTip control, where WinUI uses Composition KeyframeAnimations for the expand/contract animation of the TeachingTip. The expand/open animation works fine, but the contract/close animation doesn't work. If I take out the open animation, the close animation does work - so I know the animation is valid. In the simple repro, click the "Close Animation" Button first and let the purple border contract. Then click "Open Animation" and notice you'll have to click it twice for the animation to work. After that in the simple repro the animations work fine for some reason. These are the same animations found in the TeachingTip. I've also included a button with the TeachingTip to show it better there - the expand animation works, but click the 'X' in the popup and you'll see the popup hold for a moment before closing.

Hopefully those make sense

Minor issues

• Translation as a Target for Composition animations isn't valid in Avalonia. I think the closest is Offset, but it might be good to add Translation for compatibilty with WinUI animations

• Easing parameter types aren't the same: Vector3KeyFrameAnimation.InsertKeyFrame takes an IEasing KeyFrameAnimation.InsertExpressionKeyFrame takes an Easing

• The following expression throws an error, which is valid in WinUI: _contractElevationAnimation.InsertExpressionKeyFrame(1.0f, "Vector3(this.Target.Translation.X, this.Target.Translation.Y, 0.01f)", (Easing)_contractEasingFunction); I figured out its because of the '0.01f' in the expression where it doesn't like the 'f'. Removing that fixed it. Just noting because it's valid in WinUI, but isn't here - not sure if that should be documented or add support?

Finally, not an issue, but any chance we can get CompositionScopedBatch animations added. WinUI uses them in a few places where they have code that runs after the animation which requires notification. I was able to do a hack for this in the TeachingTip but it isn't perfect.

Desktop (please complete the following information):

• OS: Windows 11
• Version 11.0-preview1

Additional context Add any other context about the problem here.

[TomEdwardsEnscape]

Related to #8805? That has a 100% repro rate.