[BUG] Issue with rendering!

[georgeemr]

Hi, I'm trying to implement the component but with some animations I get a bad result. Anyone know what I'm missing?

<?xml version="1.0" encoding="utf-8" ?>
<toolkit:Popup xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
               xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
               xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
               xmlns:skia="clr-namespace:SkiaSharp.Extended.UI.Controls;assembly=SkiaSharp.Extended.UI"
               Color="Transparent"
               x:Class="X.Views.PopUps.LoadingPopup">
    <ContentView>
        <Border BackgroundColor="WhiteSmoke"
                Style="{StaticResource BorderLoty}"
                Padding="15"
                Stroke="Black"
                WidthRequest="250">

            <VerticalStackLayout HorizontalOptions="Center"
                                 VerticalOptions="Center">
               
                <skia:SKLottieView RepeatCount="-1"
                                   RepeatMode="Reverse"
                                   Source="Cat.json"
                                   WidthRequest="250"
                                   HeightRequest="150" />

                <Label HorizontalOptions="Center"
                       Text="Wait"
                       VerticalOptions="Center"
                       HorizontalTextAlignment="Center"></Label>
            </VerticalStackLayout>
        </Border>
    </ContentView>
</toolkit:Popup>

This is the lottie: https://lottiefiles.com/animations/loader-cat-dWUie0iIVk?from=search

Basic Information

I'm using version 2.0.0-preview.92

[mattleibow]

Are you able to attach a repro sample? I tested now and it seemed to work fine. Maybe there is some configuration issues or some issue with the version of skia, maybe and the toolkit versions.

[georgeemr]

Sure, I create a project from scratch and the issue. persist.

Maui 8.0.7

https://1drv.ms/u/s!AlTIxW_ExT1enfFcWZ8yhgAkMaYebA?e=OGdotf

[matthericks]

I am also running into a similar issue. Loading in a checkmark animation has both a strange checkmark shape and the animation surrounding the circle appears to be wrong.

repo: https://github.com/matthericks/lottie-broken-animation link to animation in Lottie files: https://app.lottiefiles.com/animation/71e19298-edbb-4d04-a06c-5bd891bea298?panel=download animation file: success.json

screenshot of checkbox in app:

screenshot of expected checkbox:

[mattleibow]

Thanks @matthericks for this lottie. It appears to be a bug in skia directly: https://skottie.skia.org/21af4dec27795f93f0ab6e5f803ea330?h=512&w=512

I see this issue may be the related one: https://issues.skia.org/issues/40043184

There is a comment about Expressions not being supported yet. Do you know if your lottie file uses Expressions?

[matthericks]

@mattleibow it does not, but that link also had some discussion on the file where I was seeing the issues, and it looks like the checkmark was created using absolute instead of relative coordinates. I updated my file with those coordinates and everything works perfectly.

thanks!

[idiidi]

I also have this issue with a some Lottie files I downloaded from LottieFiles. Is there a solution for converting these files to make them work?

Edit: Never mind. ChatGPT did the work for me :)