[Wasm][Skia] `DoubleAnimation` on `Canvas.Top` or `Canvas.Left` is not working

[jeromelaban]

Current behavior

The circle in the repro does not move

Expected behavior

The circle in the repro should move.

How to reproduce it (as minimally and precisely as possible)

https://playground.platform.uno/#122edf61

<Grid>
    <StackPanel>
        <Button x:Name="btnStart" Content="Start" Click="btnStart_Click"></Button>

        <Canvas Height="300" Width="400">
            <Canvas.Background>
                <LinearGradientBrush StartPoint="0,0.5" EndPoint="1,0.5">
                    <LinearGradientBrush.GradientStops>
                        <GradientStop Offset="0.0" Color="Cyan" />
                        <GradientStop Offset="1.0" Color="White" />
                    </LinearGradientBrush.GradientStops>
                </LinearGradientBrush>
            </Canvas.Background>

            <Ellipse Name="bouncingBall" Height="50" Width="50">
                <behaviors:DynamicAnimation.Storyboard>
                    <Storyboard x:Name="stb">
                        <DoubleAnimation 
                            Storyboard.TargetName="bouncingBall"
                            Storyboard.TargetProperty="(Canvas.Top)"
                            From="0"
                            To="250"
                            Duration="0:0:2"
                            RepeatBehavior="Forever"
                            AutoReverse="True"
                        />

                        <DoubleAnimation 
                            Storyboard.TargetName="bouncingBall"
                            Storyboard.TargetProperty="(Canvas.Left)"
                            From="0"
                            To="350"
                            Duration="0:0:15"
                            RepeatBehavior="Forever"
                        />

                        <!-- this is applied properly -->
                        <ObjectAnimationUsingKeyFrames
                            Storyboard.TargetName="bouncingBall"
                            Storyboard.TargetProperty="Opacity">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="0.5" />
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </behaviors:DynamicAnimation.Storyboard>

                <Ellipse.Fill>
                    <LinearGradientBrush StartPoint="0,0.5" EndPoint="1,0.5">
                        <LinearGradientBrush.GradientStops>
                            <GradientStop Color="White" Offset="0.0" />
                            <GradientStop Color="Red" Offset="0.75" />
                            <GradientStop Color="DarkRed" Offset="1.0" />
                        </LinearGradientBrush.GradientStops>
                    </LinearGradientBrush>
                </Ellipse.Fill>
            </Ellipse>
        </Canvas>
    </StackPanel>
</Grid>

Workaround

Set EnableDependentAnimation="True" on the DoubleOpacity animations.

Versions

Uno 4.2.6

[jeromelaban]

@dr1rrb The issue is caused by animations being skipped because of this: https://github.com/unoplatform/uno/blob/157226f4b8b03c2b0a73c6cfc8508bf593b2de51/src/Uno.UI/UI/Xaml/Media/Animation/DoubleAnimationUsingKeyFrames.cs#L196

Should we be enabling dependent animations on Skia/Wasm until we get actual Compositor based animations?

[dr1rrb]

Well I don't think that we should enable them by default. Even if currently we are animating on dispatcher, we should run only animations that "should" be independent (unless flag has been enabled in the app).

[MartinZikmund]

Closing in favor of #12301, as this is present on all targets