Animation in Xamarin Forms with Airbnb Lottie

When it comes to animation, I think Lottie library from Airbnb is one of the most recommended free libraries available out there. It’s easy to use, light weight, and most importantly, can be used across platforms, including Xamarin Forms. So, in this post, I want to do a little introduction how to use this library, and I gonna using some animations that already available at LottieFiles.

Lottie Nuget Package

To start using this library, it’s actually pretty simple. Just go to NuGet Package Manager, look for NuGet called Com.Airbnb.Xamarin.Forms.Lottie and then install it. After you finish installing, you gonna see a readme text, looks like the picture below.

From that readme text, we already get example that cover some of most important events that can be handled by Lottie. It can handle a lot more, but for starter, I will discuss those three main events handler. I will walk you through it by giving simple example how to use it.

Animation Event Handlers

Base of its name, I think you’re already able to guess what function for each handler. PlaybackStartedCommand will be triggered when the animation start playing, in the other hand, PlaybackFinishedCommand triggered at animation finished. And if by any chance user click or tap on the AnimationView, ClickedCommand will handle it. 

I made a simple example to simulate that process. I created a program to show some animations. When the animation start animating, it gonna display the name of the animation file. When it finished, it gonna show how many times the animation already played. And then when user clicking, we gonna play another animation. You can see the sample code below.

public class LottieAnimationViewModel : BaseViewModel
{
    private string animationName;
    public string AnimationName
    {
        get => animationName;
        set => SetProperty(ref animationName, value);
    }

    private string animationPlayed;
    public string AnimationPlayed
    {
        get => animationPlayed;
        set => SetProperty(ref animationPlayed, value);
    }

    private int currentAnimation { get; set; }
    private int played { get; set; }
    private List<string> animationList { get; set; } 

    public ICommand PlayingCommand { get; set; }
    public ICommand FinishedCommand { get; set; }
    public ICommand ClickedCommand { get; set; }

    public LottieAnimationViewModel()
    {
        currentAnimation = 0;
        played = 0;
        animationList = new List<string>() 
        {
            "check_animation.json", "idea_bulb.json", "washing_machine.json"
        };
        AnimationName = animationList[currentAnimation];
        AnimationPlayed = SetAnimationPlayed(played);

        MessagingCenter.Send(this, "play");

        PlayingCommand = new Command(Playing);
        FinishedCommand = new Command(Finished);
        ClickedCommand = new Command(Clicked);
    }

    private void Playing()
    {
        AnimationName = animationList[currentAnimation];
    }

    private void Finished()
    {
        played++;
        AnimationPlayed = SetAnimationPlayed(played);
        MessagingCenter.Send(this, "play");
    }

    private void Clicked()
    {
        if (currentAnimation < 2)
            currentAnimation++;
        else
            currentAnimation = 0;

        played = 0;
        AnimationPlayed = SetAnimationPlayed(played);
        MessagingCenter.Send(this, "play");
    }

    private string SetAnimationPlayed(int number)
    {
        return $"Animation Played {number} times";
    }
}

You can see the complete source code of that example in my Github repo. If you run the code, it will look like the video below.

Handling Images

One little note before I end this post. When I tried this library in my project, one thing that little bit tricky is how to handle images. There’s a difference where to put it in Droid and iOS project. In Droid project, you put your JSON animation file in folder Asset. And if you have images, you have to create folder inside Asset to store the images. In Animation View you have to reference ImageAsset property to that folder. But in iOS project, unlike Android, you have to store both JSON file and images in Resources folder. It’s not gonna work if you create another folder inside resources to store your image . Your iPhone won’t show the images.

I think that’s all for this post. You can always refer to my Github for complete code and feel free to ask, Thank you.

Credit Animation

Sample Animations from LottieFiles

Washing Machine and idea bulb by Mohit Saini

Check animation by Joshua Oluwagbemiga