Lottie animations
Describe how integrate Lottie animation components in MauiReactor
This article is based on the package SkiaSharp.Extended.UI.Maui which it's currently in preview.
Since Xamarin Forms, developers can integrate powerful animations inside their applications thanks to Lottie animation system implementation.
In .NET MAUI, you have the ability to play Lottie files using a relatively recent Skia-based implementation available inside https://github.com/mono/SkiaSharp.Extended/ package.
Using Lottie controls in MauiReactor is straightforward, it just requires you to add a package reference in csproj and to create a few scaffold classes inside your project.
First of all, add the reference to SkiaSharp.Extended.UI.Maui and MauiReactor Scaffold Generator packages:
The next step is to call the method UseSkiaSharp()
inside the MainProgram.cs file to enable SkiaSharp handlers.
After that, you have to create a few MauiReactor wrappers for the control SKLottieView which can load and play the animation:
Note that you can't just wrap the SKLottieView
but you have to generate wrappers also for the ancestors SKAnimatedSurfaceView
and SKSurfaceView
up to the TemplateView
class which is already wrapped by MauiReactor itself.
Finally, you can use the control inside your component:
The animation file (dotnetbot.json in the above example) must be placed inside the Resources\Raw folder.
This should be the final page with the animation running:
Last updated