Xamarin 动画导致我的应用程序跳过许多帧

Question

我有一个主视图页面，带有一个框架和图像（在可绘制文件夹内）。在后端，我正在做 3 秒的简单动画

我的问题：

我如何通过简单的动画和 500x500 的图像做太多的工作。如何解决此错误？

顺便说一句，如果我删除动画代码Task.WhenAll，它可以正常工作

Thread started:  #5
[Choreographer] Skipped 1191 frames!  The application may be doing too much work on its main thread.
 [ViewRootImpl@5028d58[MainActivity]] dispatchAttachedToWindow
[me.idcardwalle] Explicit concurrent copying GC freed 1534(155KB) AllocSpace objects, 0(0B) LOS objects, 69% free, 2MB/8MB, paused 53us total 16.620ms
[Mono] GC_TAR_BRIDGE bridges 168 objects 168 opaque 0 colors 168 colors-bridged 168 colors-visible 168 xref 0 cache-hit 0 cache-semihit 0 cache-miss 0 setup 0.05ms tarjan 0.04ms scc-setup 0.05ms gather-xref 0.00ms xref-setup 0.00ms cleanup 0.03ms
[Mono] GC_BRIDGE: Complete, was running for 17.71ms
[Mono] GC_MINOR: (Nursery full) time 3.13ms, stw 4.30ms promoted 158K major size: 3984K in use: 3218K los size: 4096K in use: 3634K
...
[Choreographer] Skipped 40 frames!  The application may be doing too much work on its main thread.
[ViewRootImpl@5028d58[MainActivity]] MSG_RESIZED: frame=Rect(0, 0 - 1080, 2220) ci=Rect(0, 63 - 0, 126) vi=Rect(0, 63 - 0, 126) or=1
[InputMethodManager] prepareNavigationBarInfo() DecorView@a5c60a8[MainActivity]
[InputMethodManager] getNavigationBarColor() -855310

动画代码

protected override async void OnAppearing()
    {
        base.OnAppearing();

        ssImage.Opacity = 50;

        await Task.WhenAll(
            ssImage.FadeTo(1, 3000),
            ssImage.ScaleTo(1.2, 3000)
            );

                 var route = $"{ nameof(NewPage)}";
                    await Shell.Current.GoToAsync(route);
 }

界面代码

 <Frame VerticalOptions="FillAndExpand"
               HorizontalOptions="FillAndExpand" 
               Padding="0" Margin="0">
            <Frame.Background>
                <LinearGradientBrush>
                    <GradientStop Color="#0087c8" Offset="0.1" />
                    <GradientStop Color="#005783"  Offset="1.0" />
                </LinearGradientBrush>
            </Frame.Background>

            <Image x:Name="ssImage" Source="ssImage.png"
                   VerticalOptions="CenterAndExpand" 
                   HorizontalOptions="CenterAndExpand"
                   HeightRequest="300"
                   WidthRequest="300" />
        </Frame>
      

更新：我也尝试了 asysn 任务，但同样的错误

    await Task.Run(async () => {
            await ssImage.FadeTo(1, 3000);
            await ssImage.ScaleTo(1.2, 3000);
        });

Answer 1

OnAppearing 发生在页面显示之前。

要获得流畅的动画，您希望页面在动画开始之前完成显示。这需要以下两个代码更改：

1. 不要等待动画完成 - 让 OnAppearing 返回。

2. 延迟动画的开始。

代码：

using Xamarin.Essentials;

...
// Start a background thread, so can delay without pausing `OnAppearing`.
// DO NOT have `await`/`async` here.
Task.Run(() => {
    // Give UI thread some time to layout/begin-displaying the page.
    // (Without this, a complex page might still be in layout,
    //  so the animation might start, then hiccup, like the original code.)
    Task.Delay(200);
    // If UI thread is in middle of displaying the page,
    // that is okay; this will run once UI thread is available.
    MainThread.BeginInvokeOnMainThread(async () =>
    {
        // Now we are back on the main thread.
        await ssImage.FadeTo(1, 3000);
        await ssImage.ScaleTo(1.2, 3000);
    });
});