Search code examples
animationmauilottie

What is the preferred way of interacting with Lottie files in a .NET MAUI app?

I would like to implement an animated Play/Pause button in my .NET MAUI streaming app.

For this I thought I might use a lottie file.

I am able to use SkiaSharp.Extended.UI.Maui to load and animate a lottie file.

However, the control itself does not offer any kind of interaction such as Commands or an OnClick event handler.

Maybe I am blind, but what is the preferred way of transforming this "static" control to something, my users can interact with?

Solution

  • If you want to provide some interactions, i thought you could add some gestures on SKLottieView.

    In .xaml file

    <skia:SKLottieView
    x:Name="myanimatedview"
    Source="dotnetbot.json"
    HeightRequest="300"
    WidthRequest="300"
    RepeatCount="-1">              
    <skia:SKLottieView.GestureRecognizers>
          <TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped"/>
    </skia:SKLottieView.GestureRecognizers>
</skia:SKLottieView>

    In .cs file, implement the event handler.

    void TapGestureRecognizer_Tapped(System.Object sender, System.EventArgs e)
{
    Console.WriteLine("hello"); // do whatever you want here
    myanimatedview.IsAnimationEnabled = !myanimatedview.IsAnimationEnabled;
}

    You could add different gestures, such as pinch, pan, swipe etc, to interact with users. For more information, you could refer to Xamarin.Forms gestures.

    Hope it works for you.