mono / SkiaSharp.Extended

SkiaSharp is a cross-platform, comprehensive 2D graphics API for all .NET platforms. And, here is where you will find all sorts of extras that you can use with it.
https://mono.github.io/SkiaSharp.Extended
MIT License
218 stars 69 forks source link

[BUG] Issue with rendering! #264

Open georgeemr opened 3 months ago

georgeemr commented 3 months ago

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

image

<?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 commented 2 months ago

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 commented 2 months ago

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

image

Maui 8.0.7 image

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

matthericks commented 2 months ago

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 2024-04-19 at 1 05 43 PM

screenshot of expected checkbox:

Screenshot 2024-04-19 at 1 19 53 PM
mattleibow commented 2 months ago

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 commented 2 months ago

@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!