SkLottieView doesn't animate on some phones

[nathenxbrewer]

When using some Android phones, the SKLottieView freezes at the first frame and won't animate.

Pixel 6a, Android 14 - Frozen
Samsung S22+, Android 14 - Works fine
Galaxy Z Fold 6, Android 14 - Frozen

I've had to switch back to SkiaSharp.Extended.UI.Controls.SKLottieView

<views:Canvas WidthRequest="90" HeightRequest="110" HorizontalOptions="Fill"
              Margin="8,0,8,0" Gestures="Disabled">
    <views:SkiaLottie Repeat="-1" Source="{Binding AnimationSource}"
                      IsVisible="{Binding Selected}" IsEnabled="{Binding Selected}"
                      HeightRequest="110" WidthRequest="90" />
</views:Canvas>

[taublast]

Reproduced, on it.

[taublast]

I pushed a new nuget, would need you to confirm if it solved it, contains "Fix for animators and invalidation when IsVisible is changing at runtime."

For NET 9 you need version not lower than 1.3.x. - latest is 1.3.60.1
For legacy NET 8 and SkiaSharp v2 versions use 1.2.x. - latest is 1.2.99.1

[nathenxbrewer]

Awesome! Sorry I didn't get back with you to try that for you. I'll give this a try on Monday when I'm back at work. Thanks! 🎉

[nathenxbrewer]

@taublast doesn't seem to have changed anything. I've upgraded to 1.2.99.1 and my animations are still frozen, even when I'm not even binding to IsVisible. They seem to unfreeze if I change IsVisible multiple times during runtime

[nathenxbrewer]

@taublast this is really interesting.

This works:

 <drawn:Canvas  HorizontalOptions="Center">
       <drawn:SkiaLottie DefaultFrame="-1" Source="loading-equalizer.json"  HeightRequest="100" WidthRequest="100" />
 </drawn:Canvas>

But not this:

 <drawn:Canvas WidthRequest="100" HeightRequest="100" HorizontalOptions="Center">
       <drawn:SkiaLottie DefaultFrame="-1" Source="loading-equalizer.json"  HeightRequest="100" WidthRequest="100" />
 </drawn:Canvas>

BUT, if I set WidthRequest/HeightRequest for Canvas anything smaller than 90, it works.

[taublast]

This is more than interesting indeed. Hopefully, we will get it fixed this weekend.

[nathenxbrewer]

This is more than interesting indeed. Hopefully, we will get it fixed this weekend.

No rush now that I know this works this way. Previously, I was not having luck with having no HeightRequest or WidthRequest on Canvas so that's why I had it defined on both Canvas and SkiaLottie but seems fine now just setting those on SkiaLottie only.

[taublast]

@taublast this is really interesting.

This works:

<drawn:Canvas HorizontalOptions="Center">
<drawn:SkiaLottie DefaultFrame="-1" Source="loading-equalizer.json" HeightRequest="100" WidthRequest="100" />
</drawn:Canvas>
But not this:

<drawn:Canvas WidthRequest="100" HeightRequest="100" HorizontalOptions="Center">
<drawn:SkiaLottie DefaultFrame="-1" Source="loading-equalizer.json" HeightRequest="100" WidthRequest="100" />
</drawn:Canvas>
BUT, if I set WidthRequest/HeightRequest for Canvas anything smaller than 90, it works.

Sorry for delay, so im running this on windows net9, tried both xaml and code-behind versions, and cannot reproduce the issue from this example.
I have a theory that adding a WidthRequest="100" HeightRequest="100" might randomly make MAUI call some additional remeasuring pass breaking the playing animation maybe.
Is this issue totally unrelated to IsVisible like in your latest example?
You can ping me on discord as taublast if you want for faster feedback.

What platform should I try to reproduce on?

[nathenxbrewer]

Yeah totally unrelated to the IsVisible issue I believe.

I'm on iOS and Android.

[taublast]

Still cannot reporduce this on android now, maybe its related to where your the canvas is wrapped, or how it appears, maybe you have a navigation or something? Ijust show this like this as page content and it works:

    <draw:Canvas 
                  WidthRequest="100" HeightRequest="100" HorizontalOptions="Center">
        <draw:SkiaLottie 
            DefaultFrame="-1" Source="Lottie/ok.json"  HeightRequest="100" WidthRequest="100" />
    </draw:Canvas>