/Lottie

.NET MAUI and .NET Native library that parses Adobe After Effects animations exported as json with Bodymovin and renders them natively!

Primary LanguageC#Apache License 2.0Apache-2.0

MPowerKit.Lottie

This is a .NET MAUI and .NET Native library that parses Adobe After Effects animations exported as json with Bodymovin and renders them natively!

"Buy Me A Coffee"

Inspired by BaseFlow's Xamarin library, but ported for .NET MAUI and using latest native libraries. Added some extra features like HardwareAcceleration, State of the animation and TintColor.

Support

Before opening an issue, be sure you have tested your case with a Sample project from this repo. If you are able to reproduce the issue, be sure this issue is not coming from the native libraries lottie-android and lottie-ios, which are used under the hood for this library.

If you feel the lack of functionality, feel free to open a PRs.

Supported platfroms

  • .NET8
  • .NET8 for Android (min 6.0)
  • .NET8 for iOS (min 13)
  • .NET8 for MacCatalyst (min 13.1)

Download

  • Android: NuGet Badge
  • iOS / Mac Catalyst: NuGet Badge (This library has limited set of functionality, but enough to play the animation)
  • .NET MAUI: NuGet Badge

For the first time, designers can create and ship beautiful animations without an engineer painstakingly recreating it by hand. They say a picture is worth 1,000 words so here are 13,000:

Example1

Example2

Example3

Community

Example4

All of these animations were created in After Effects, exported with Bodymovin, and rendered natively with no additional engineering effort.

Bodymovin is an After Effects plugin created by Hernan Torrisi that exports After effects files as json and includes a javascript web player. We've built on top of his great work to extend its usage to Android, iOS, and React Native.

Read more about it on our blog post Or get in touch on Twitter (gpeal8) or via lottie@airbnb.com

Using Lottie for .NET MAUI

Add UseMPowerKitLottie() to your MauiProgram.cs file as next

builder
    .UseMauiApp<App>()
    .UseMPowerKitLottie();

Default usage is:

<mpk:LottieView Source="cat.json"
                HeightRequest="150"
                WidthRequest="150" />

Note: if you want to play the animation just using the name of the json, be sure you've put it into Resources/Raw folder as MauiAsset

Note: there are several readonly properties which should be bound only with Mode=OneWayToSource

The full list of properties you can find here.

Also, you can bind actions to play/stop the animation from your ViewModel and invoke them from ViewModel as next:

ViewModel:

public class MainViewModel : BaseViewModel
{
    public Action PlayAction { get; set; }
    public Action StopAction { get; set; }

    private void Play()
    {
        PlayAction?.Invoke();
    }

    private void Stop()
    {
        StopAction?.Invoke();
    }
}

Your Xaml:

<mpk:LottieView Source="cat.json"
                HeightRequest="150"
                WidthRequest="150"
                Play="{Binding PlayAction, Mode=OneWayToSource}"
                Stop="{Binding StopAction, Mode=OneWayToSource}" />

All list of bindable properties you may find here:

Lottie/MPowerKit.Lottie/LottieView.cs

Line 163 in 995df55

#region PlayAction

Using Lottie for Android

Read the official docs here

Using Lottie for iOS / Mac Catalyst

Read the official docs here