Hot questions for Using Lottie in xamarin

Question:

I'm trying to use Lottie animation in my splash screen.

I created a new xaml page that contains my AnimationView:

<StackLayout>
    <forms:AnimationView 
        x:Name="SplashView" 
        Animation="hello.json"
        Loop="true"
        AutoPlay="true"
        IsEnabled="True"
        IsPlaying="True"
        IsVisible="True"
        VerticalOptions="Center" 
        HorizontalOptions="Center" />
</StackLayout>

When the app is launched the MainPage should be the one who contains the AnimationView. I added an event 'SplashView.OnFinish' so when the animation is finished the page is changed to my Home page using NavigationPage.PushAsync.

Here is the code behind

public SplashScreen ()
{
    InitializeComponent ();
    NavigationPage.SetHasNavigationBar(this, false);

    SplashView.Play();
    SplashView.OnFinish += SplashView_OnFinish;
}

protected override void OnAppearing()
{
    base.OnAppearing();
    SplashView.Play();
}

private void SplashView_OnFinish(object sender, EventArgs e)
{
    Navigation.PushAsync(new MainPage());
}

Everything works but I can't see the animation just a white page.

The Navigation.PushAsync works but the animation doesn't show.

I tried the method OnAppearing to Trigger the start of my animation but still doesn't work.


Answer:

So you can simplify the code-behind, and PushAsync returns a Task, so you need to await it.

public partial class SplashPage : ContentPage
{
    public SplashPage()
    {
        InitializeComponent();
        NavigationPage.SetHasNavigationBar(this, false);
    }

    async void SplashView_OnFinish(object sender, EventArgs e)
    {
        await Navigation.PushAsync(new MainPage());
    }
}

For the XAML, you do not want looping enabled as the OnFinish handler would never be called. You can supply the OnFinish handler, etc... The biggest issue is that just using Center for the vert/horz options provides no size to the view, use FillAndExpand to try to match the containing view.

<forms:AnimationView
    x:Name="SplashView"
    Animation="hello.json"
    Loop="false" 
    AutoPlay="true"
    OnFinish="SplashView_OnFinish"
    VerticalOptions="FillAndExpand" 
    HorizontalOptions="FillAndExpand" />

Question:

I have this click event for my button:

        private void BtnRecord_Clicked(object sender, EventArgs e)
        {           
            if (BtnRecord.BackgroundColor == Color.Coral)
            {
                blue_record_lottie.Loop = true;
                blue_record_lottie.AutoPlay = true;
                blue_record_lottie.Play();
                BtnRecord.BackgroundColor = Color.Red;
            }

            else if (BtnRecord.BackgroundColor == Color.Red)
            {
                BtnRecord.BackgroundColor = Color.Coral;
                blue_record_lottie.AbortAnimation(blue_record_lottie.ToString());
                blue_record_lottie.Loop = false;
                blue_record_lottie.AutoPlay = false;
            }
        }

It just stops the animation of the button if the button color is red and when the animation is done playing. The animation will have to finish from the start of the animation to the end, and then it stops. I want it to immediately stop when I click the button.

Thanks in advance


Answer:

If you want to make your Animation go back immediately to the very first state of the animation, you can do this:

Animation.PlayFrameSegment(0, 0);

This will play the very first Frame of your animation, after that, you can restart the animation like you would normally do.

Question:

I want to inflate a Layout-File in my DialogFragment which only holds one LottieAnimationView

<com.airbnb.lottie.LottieAnimationView
  android:id="@+id/animViewTest1"
  android:layout_height="100dp"
  android:layout_width="100dp"
  app:lottie_fileName="json_Saved.json"
  app:lottie_loop="false"
  app:lottie_autoPlay="false"
  />

I want the Fragment to show up, play the animation once, and automatically close, after the animation is finished.

I can access the AnimView

animView = view.FindViewById<LottieAnimationView>(Resource.Id.animViewTest1);
animView.PlayAnimation();

but i can't find a way to get to the onAnimationEnd Method or something similar.

I found this similar question: How to know when lottie animation is completed?

But it does not helped me to make it work in my case.


Answer:

You need to use IAnimatorListener listener, just implement it by your class:

YourClass : IAnimatorListener

with all needed methods, one of them is what you're after:

public void OnAnimationEnd(Animator animation)
{
// your logic on animation end
}

and then assign your IAnimatorListener implementation as animator listener of your lottie view:

this.animationView.AddAnimatorListener(implementationOfIAnimatorListener);

You can find a full example on Lottie Xamarin github: https://github.com/martijn00/LottieXamarin/blob/develop/Samples/Native/Example.Droid/AnimationFragment.cs