Lottie AnimationView Not working in iOS but is working in Android c# Implementation

Question

When attempting to play an animation on Android the animation displays and plays correctly, however, on iOS the animation does not display. When calling element.IsPlaying we get the return value of true.

Lottie is correctly configured across both Android and iOS implementations, files are located in assets and root project folders for Android and iOS and the correct build actions are set.

Code:

public class xxx : ContentPage {
    AnimationView element = new AnimationView();

    public xxx()
    {
        element = new AnimationView() {
            Loop = true,
            AutoPlay = true,
            Animation = "splashyloader.json",
            WidthRequest = 400,
            HeightRequest = 400,
            VerticalOptions = LayoutOptions.FillAndExpand,
            HorizontalOptions = LayoutOptions.FillAndExpand,
            IsVisible = true,
            Speed=1
        };
    }
    protected override void OnAppearing(){
        element.Animation = "splashyloader.json";
        element.Play();
    }
}

Have you tried removing the height and width request properties? It’s just a thought. I know it can be picky on the sizing even if the horizontal and vertical options are set to fill and expand. Also, that can’t be all of the code because you’re missing the call to InitalizeComponent() and “element” is never loaded into the pages content. Do you have it all? Also, my Lottie files are loaded into the Resources folder, not sure if that matters. Finally, check to ensure the build properties of the json file is correct. — Skin, Jan 27 '19 at 09:52
That’s all the code relating to Lottie, everything else is logic and interface code. The Lottie animationview is being added to a stack layout which is contained within a scroll view added to Content. I have tried without height / width properties. Using 2.7.0 across all projects. No idea why this is happening, haven’t used Lottie before and I’m sure it’s not that Lottie just doesn’t work. — koharuai, Jan 27 '19 at 13:01
It works whenever I use XAML, however the majority of interfaces within the software are generated using C# for speed purposes and it seems Lottie doesn't like C# without XAML. — koharuai, Jan 27 '19 at 13:30
What if you created a reusable control that had the XAML behind it with the anijationview embedded in a layout and then drop that control in rather than the animation view directly? — Skin, Jan 27 '19 at 19:50
Do you mean create a contentview with XAML and reference the contentview whenever I want to embed an animationview? — koharuai, Jan 28 '19 at 02:05
Yes, correct. It sounds like you may have already tried that? — Skin, Jan 28 '19 at 02:06
Honestly no I haven't. It's well worth a try though! I'll give it a whirl and let you know how it goes. — koharuai, Jan 28 '19 at 02:43
Okay, so I created a ContentView with XAML, created the AnimationView using XAML but used a constructor which accepted args to control the animation, loop and auto-play info. It's working now (thank goodness) but I did find out that one of the animation JSONs I got wasn't working on iOS, it wasn't the root cause of the issue but it certainly played a role. Thanks for your help. — koharuai, Jan 28 '19 at 06:03
I tried your code ,And it works fine .I just replaced the "splashyloader.json" with my own json file. — Lucas Zhang, Jan 28 '19 at 06:09
@LucasZhang-MSFT was that on iOS or Android? I noticed it worked fine on Android but wouldn't play any animations on iOS until I created a custom ContentView and coded the AnimationView in XAML. — koharuai, Jan 28 '19 at 06:15

score 0 · Accepted Answer · answered Jan 28 '19 at 06:14

After investigation I identified that most animations were playing from an AnimationView constructed using XAML. Brad Dixon made the suggestion to create a ContentView with XAML and construct a custom view for the Lottie Animation which could then be called programmatically without issues.

Once implemented preliminary tests indicated this to work, further tests indicated that the primary Lottie JSON animation file I was attempting to use would not work on iOS (suggests a possible corruption).

This appears to work, however, is not really the most optimal setup. Hopefully a future version of Lottie will render this obsolete.

AnimatingView.xaml

<?xml version="1.0" encoding="UTF-8"?>
    <ContentView xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="FoodMono.Views.AnimatingView" xmlns:forms="clr-namespace:Lottie.Forms;assembly=Lottie.Forms">
        <ContentView.Content>
            <forms:AnimationView x:Name="animation" Loop="True" AutoPlay="True" HeightRequest="300" WidthRequest="300" Speed="1" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Animation="5stars.json" />
        </ContentView.Content>
    </ContentView>

AnimatingView.xaml.cs

public partial class AnimatingView : ContentView
{
    string animationName = null;
    public AnimatingView(string AnimationName, bool loop=true, bool autostart=true)
    {
        InitializeComponent();
        animationName = AnimationName;
        animation.Animation = AnimationName;
        if(!loop)
            animation.Loop = loop;
        if(!autostart)
            animation.AutoPlay = autostart;


    }
    protected override void OnParentSet()
    {
        Console.WriteLine(animation.IsPlaying);
        this.Start();
        Console.WriteLine(animation.IsPlaying);
        base.OnParentSet();
    }
    public void Start()
    {
        animation.Play();
    }
    public void Stop()
    {
        animation.AbortAnimation(animationName);
    }
}

I believe your LayoutOptions for your AnimationView should just be "Fill" as you only use the expand options in a StackLayout. — Chucky, Oct 21 '19 at 16:13

score 0 · Answer 2 · answered Jan 28 '19 at 06:15

0

Put your AnimationView inside a custom control/ContentView and use it that way. The container with the XAML will make it work as expected.

answered Jan 28 '19 at 06:15

Skin

9,085
2
13
29

Lottie AnimationView Not working in iOS but is working in Android c# Implementation

2 Answers2