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

[Larhei]

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

• Version with issue: 2.0.0-preview.61
• Last known good version: Unknown
• IDE: VS2022
• Platform Target Frameworks:
  • Android: net6.0-android

Bug.zip

[KlaasTroost]

the same problem on ios

[vikher]

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

Screen-Recording-2023-09-19-at-3.mp4

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>