Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
vikher opened this issue Sep 20, 2023 · 4 comments
Labels

Comments

@vikher
Copy link

vikher commented Sep 20, 2023

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>
@vikher vikher added the bug label Sep 20, 2023
@maurictg
Copy link

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
Copy link

@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
Copy link

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.

@IeuanWalker
Copy link
Contributor

Same issue in the CollectionView.EmptyView template

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

5 participants