iOS Not rendering animation after lottie editor color edit

[nk-alex]

🐛 Bug Report

Animation only visible on android after using lottie editor to change its color.

Expected behavior

The animation to be visible on both platforms

Reproduction steps

Download an animation from https://lottiefiles.com/ and use it within AnimationView (Works as expected). Change the animation color using lottie editor (In this case, the animation is only visible in Android, in iOS is not showing)

Configuration

<Grid Grid.Row="0" BackgroundColor="Transparent">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="80"/>
                            <ColumnDefinition Width="*"/>
                        </Grid.ColumnDefinitions>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="80"/>
                        </Grid.RowDefinitions>

                        <forms:AnimationView
                            Grid.Row="0" Grid.Column="0"
                            x:Name="menuView"
                            Animation="menu.json"
                            HeightRequest="60"
                            WidthRequest="60"
                            Speed="3"
                            AutoPlay="False"
                            VerticalOptions="Center"
                            Clicked="menuView_Clicked"
                            HorizontalOptions="Center"/>

                        <Label Text="{Binding WelcomeMessage}" FontSize="28" FontAttributes="Bold" Grid.Row="0" 
                                 Grid.Column="1"/>
</Grid>

Com.Airbnb.Xamarin.Forms.Lottie Version: 4.1.0 Com.Airbnb.iOS.Lottie Version: 2.5.13 Xamarin.Forms Version: 5.0.0.2578

Tested on: iPhone 14 Plus iOS 16.1 emulator iPhone 6 Plus iOS 12.4 emulator iPhone 7 iOS 15.7.1 real device

Platform:

• [x] :iphone: iOS
• [ ] :robot: Android
• [ ] :checkered_flag: WPF
• [ ] :earth_americas: UWP
• [ ] :apple: MacOS
• [ ] :tv: tvOS
• [ ] :monkey: Xamarin.Forms

[nk-alex]

Found the problem.

Basically colors in .json files are specified by structures like this:

"k": [ 0.03137254902, 0.658823529412, 1, 1]

Where the values are RGBA

After editing colors using lottieEditor, the mentioned structure looks like this:

"k": [0.2706, 0.3176, 0.3922]

Where values are RGB, so A (alpha) is missing,

The current implementation in Android assumes A being 1 (full opacity), while the current implementation on iOS assumes A being 0 (transparent), that's why the animation is not showing on iOS. If you open up the .json file and manually add 1 as fourth element of the color structure array, animations are going to show on iOS as well

[jeroduck]

Hi Alex, I have the same config as yours, and i desesperatly try to run Lottie on IOS. It crashes all the time. Do you have advices ?

Thanks, Jérôme