'Xamarin Forms - Lottie Animation - CarouselView

I'm using the latest version of Xamarin Forms and Lottie package. I'm trying to bind lottie animation in carouselview. The problem is lottie animation start after i have scrolled all the slides. (if i not scroll the animation is blank) my carouselview xaml is:

<CarouselView
            PositionChanged="TheCarousel_PositionChanged"
            x:Name="TheCarousel"
            AbsoluteLayout.LayoutBounds="0,0,1,1"
            AbsoluteLayout.LayoutFlags="All"
            IndicatorView="indicatorview">
            
            <CarouselView.ItemTemplate>
                <DataTemplate>
                        <AbsoluteLayout>
                            <StackLayout 
                            AbsoluteLayout.LayoutBounds=
                            "0.5,0.3,AutoSize,AutoSize"
                            AbsoluteLayout.LayoutFlags=
                            "PositionProportional"
                            HorizontalOptions="Center"
                            >

                                <forms:AnimationView
                                    x:Name="animationView"
                                    Animation="{Binding animazione}"
                                    AnimationSource="EmbeddedResource"
                                    CacheComposition="True"
                                    AutoPlay="{Binding autoplay}"
                                    RepeatMode="Infinite"
                                    VerticalOptions="FillAndExpand"
                                    HorizontalOptions="FillAndExpand" />

                                <Label
                                FontSize="Title"
                                HorizontalOptions="Center"
                                HorizontalTextAlignment="Center"
                                Text="{Binding testo}"
                                VerticalOptions="Center" />



                            </StackLayout>
                        </AbsoluteLayout>
                </DataTemplate>
            </CarouselView.ItemTemplate>
        </CarouselView>

and i populate it via code:

TheCarousel.BatchBegin();
intro = new ObservableCollection<Intro>();
var intro1 = new Intro { color1 = Color.Red, color2 = Color.Red, testo = "Hello 1", animazione = "Assets.71216-delivery-guy.json", autoplay = true };
var intro2 = new Intro { color1 = Color.RosyBrown, color2 = Color.Red, testo = "Hello 2", animazione = "Assets.pagamento-carte.json", autoplay = true };
intro.Add(intro1);
intro.Add(intro2);
TheCarousel.ItemsSource = intro;
TheCarousel.BatchCommit();

Why this happen ?



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source