search

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
231 stars 69 forks source link

[BUG] SKLottieView not working on Android when used within CarouselView #144

Open Larhei opened 2 years ago

Larhei commented 2 years ago

When using SKLottieView within a CarouselView on Android the animation is not playing always when cycling through the views.

See attached demo

Expected Behavior Animation is playing all the time.

Actual Behavior

Animation is not playing all the time.

Basic Information

Bug.zip

KlaasTroost commented 2 years ago

the same problem on ios

vikher commented 1 year ago

a demo of the issue is available at the following link:

https://github.com/mono/SkiaSharp.Extended/assets/3643619/aeb0ebb4-9869-4b6d-8e19-27fe0194a376

Description:

When using SKLottieView within a CarouselView on both Android and iOS platforms, we are encountering several issues:

Android:

The animations are not playing consistently when cycling through the views in the CarouselView. All Lottie files seem to be loaded at once.

iOS:

The first Lottie file doesn't load correctly. When scrolling left in the CarouselView, it sometimes breaks the animation. Animation behavior is inconsistent compared to Android, where animations do not play every time you scroll.

Basic Information:

Package Version with the issue: "SkiaSharp.Extended.UI.Maui" Version="2.0.0-preview.83" Last known good version: Unknown IDE: Visual Studio for Mac 2022 Platform Target Frameworks: Android and iOS

Steps to Reproduce:

Create a Xamarin MAUI application. Add a CarouselView to a page. Use SKLottieView within the CarouselView.ItemTemplate. Bind SKLottieView properties such as Source to Lottie animation files. Populate the CarouselView with multiple items containing SKLottieView elements. Run the application on both Android and iOS devices. Observe the described issues during the carousel scrolling and animation playback.

Expected Behavior:

We expect the SKLottieView animations to play consistently on both Android and iOS platforms as the user scrolls through the CarouselView. The animations should load correctly, and there should be no noticeable issues with animation playback.

It has come to our attention that this issue has been open for a year now. We would like to inquire whether it has already been added to the backlog. We look forward to your support in resolving these issues promptly.

Code snippet:

        <CarouselView.ItemTemplate>
            <DataTemplate x:DataType="viewModels:FlashCardViewModel" >
                <Grid   RowDefinitions="60*,40*"
                        ColumnDefinitions="*" 
                        ColumnSpacing="0"
                        HorizontalOptions="Fill"
                        RowSpacing="0"
                        VerticalOptions="Fill">
                    <VerticalStackLayout
                            Grid.Row="0"
                            Grid.Column="0"
                            HeightRequest="440"
                            WidthRequest="440" >
                        <skia:SKLottieView
                            x:Name="LottieAnimationView"
                            HorizontalOptions="Center"
                            BackgroundColor="{Binding AnimationBackgroundColor}"
                            Source="{Binding AnimationFileName}"
                            RepeatCount="0"
                            HeightRequest="440"
                            WidthRequest="440" />
                    </VerticalStackLayout>
                </Grid>
            </DataTemplate>
        </CarouselView.ItemTemplate>
    </CarouselView>