This post is part of #MAUIUIJuly. It's a great initiative to share helpful content with the community.
What is Lottie?
Lottie is a library for Android, iOS, Web, and Windows that parses Adobe After Effects animations exported as json with Bodymovin and renders them natively on mobile and on the web!
For the first time, designers can create and ship beautiful animations without an engineer painstakingly recreating it by hand.
Why bind?
When I wrote my app which needed Lottie animations, I found LottieXamarin library, but that only works with Xamarin.Forms not with MAUI. I tried to update it, however I've run into multiple issues and at the same time I've realised only older Lottie versions can be binded, because from March of 2019, Lottie is a Swift library, which means it can't be binded easily. With the binding solution I'll show below you can bind the latest version.
The other option is Skottie which was released after I'd already done my Lottie binding. I think Skottie is a viable alternative, based on your project needs can you select the best option.
Getting Started
I have two great resources for binding a library:
To bind Lottie I chose slim binding approach, please check the video for the details.
This post would like to give a high level overview how view binding can be done, for the details please check the resources above and LottieMaui repo.
Let's start with Android
LottieProxy
LottieAnimationViewWrapper does what the name suggest. It wraps LottieAnimationView which means, it initializes, exposes the View and makes the caller able to set the animation. The class itself is in an android library.
In the video above there is a script which downloads all the dependencies. Here you can find it, so you can easily paste it in your gradle.
Lottie.Proxy.Binding
Nothing to see here, this is to connect the .net world with the android library. This project simplifies our job with not forcing us to bind 100% of any library, but only what we need (and already wrote in LottieProxy).
Then make it work on iOS
LottieProxyiOS
On iOS side to keep it clean, I've used Carthage to get Lottie. The wrapping is pretty much the same, the goal is to make sure we can set the animation and get the view.
I've borrowed the build script from the Swift binding walkthrough.
LottieProxyiOS.Binding
After you run sharpie you'll get an interface close to this:
The good thing is you have 100% control over what will be binded, so if you run any issue, it's much easier to fix as you would do the binding against the whole Lottie framework.
Don't forget to include all the frameworks and you see absolute paths here because relative paths don't always work for me.
Common
Lottie.Maui
Okay, we have the Lottie binding, now what? Let's use one of the greatest addition of MAUI, handlers. You'll find in this post the steps for LottieMaui, and please find here the detailed description.
First step is to define our interface:
Then implement the interface:
Then create the LottieHandler with mappers. This is a partial class, the most interesting things will be happening in the Platform folder. Basically, there will be connected the binded C# libraries with our cross-platform app. As you see below I've only implemented what I needed. I wanted to show an animation loop, so I only implemented those parts. Later, anything else can be easily added.
Don't forget to add the handler:
handlers.AddHandler(typeof(ILottieView), typeof(LottieHandler));
Lottie.Maui iOS handler
Lottie.Maui Android handler
And last but not least, you can add LottieView to your app, and you'll have the looping animation:
If you made it here, you're awesome! I hope this post is going to be helpful.
I mentioned above, I implemented all this for my app, which is a Microsoft To Do client for Apple Watch and Wear OS devices. You can download from the AppStore and from Play Store
You can find all the code here: https://github.com/Csaba8472/LottieMaui
Top comments (0)