[BUG] SKLottieView in MAUI CarouselView - Inconsistent Animation Playback on Android and iOS Platforms

[vikher]

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>

[maurictg]

Same issue. Also, on Android, no animation is loading within a carousel at all unless the source is set to a type of SKLottieImageSource, so a Binding to a string seems not always to work.

[BrandanN21]

@maurictg @vikher I was able to get Lottie animations to work inside a CarouselView, each 'page' having a different animation.

You will have to alter your ItemSource data structure to include the object SKFileLottieImageSource

The model would look something like this:

public class AnimationModel
{
    public SKFileLottieImageSource Animation { get; set; }
    // include any other relevant information for your carousel view that you need
}

Since you are likely going to have different animations on each 'page' of the carousel you can set up your item source like so:

var itemSource = new List<AnimationModel>
{
    new AnimationModel
    {
        // all your other data
        Animation = new SKFileLottieImageSource
        {
            File = [insert your json animation file here as a string]
        }
    },
    // other items in your source list
}

Then once you have that set up within your XAML or C# UI you would need to bind to the source property using the Animation property within your Item Template.

In C#

ItemTemplate = new DataTemplate(() =>
            {
                var skLottieView = new SKLottieView()
                {
                    HeightRequest = 440,
                    WidthRequest = 440,
                };
                skLottieView.SetBinding(SKLottieView.SourceProperty, "Animation");
                
                // finish setting up your carousel view layouts
            });

or in XAML:

<skia:SKLottieView
Source="{Binding Animation}" // this Animation is a SKFileLottieImageSource object
HeightRequest="440"
WidthRequest="440" />

I will try to get a sample repo up later and link to it.

[dainius-r]

My findings: Lottie animation works if used with bindings and your own custom converter (using SKLottieImageSource.FromFile).

<CarouselView ItemsSource="{Binding CarouselItems}" Loop="True">
    <CarouselView.ItemTemplate>
        <DataTemplate x:DataType="local:CarouselItem">
                <skia:SKLottieView Source="{Binding AnimationFileName, Converter={StaticResource FileToSKLottieImageSourceConverter}}" RepeatCount="-1" />
        </DataTemplate>
    </CarouselView.ItemTemplate>
</CarouselView>

But for some reason animation did not start playing for first item in the list, all other items animation playing, and event when looping around items every second first item in the list is playing. There is some kind of bug when binding items first items animation did not start.

Workaround I used, is to add invisible dummy skia:SKLottieView with source pointing to first item outside of CarouselView, this starts the animation.

@mattleibow if you have time, you can check for bug relating to animation start for first binding item.