Xamarin animation causing my application to skip many frames - animation

Question

I have a main View Page, with a frame & image (inside drawable folder). on Back-end i am doing simple animation for 3 seconds
My Question:
How am I doing too much work by simple animation and image is 500x500. How to fix this error?
By the way, it works fine, if i remove animation code 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
Animation code
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);
}
UI Code
<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>
Update: I also tried asysn task but same error
await Task.Run(async () => {
await ssImage.FadeTo(1, 3000);
await ssImage.ScaleTo(1.2, 3000);
});

Answer 1

OnAppearing happens just before the page is diplayed.
To get smooth animation, you want the page to finish displaying before the animation starts. This requires the following two code changes:
DO NOT WAIT for the animation to finish - let OnAppearing return.
Delay the start of the animation.
Code:
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);
});
});