[FEATURE] Lottie play certain frames

[IeuanWalker]

Be able to play to a certain frames. The lottie documentation has a goToAndStop

I'd like to create a switch using a lottie animation, but without this sort of functionality its impossible. https://lottiefiles.com/127464-animated-switch-ae-version

[joshardt]

I would like to have this as well for my projects. The previous Xamarin library we used from Airbnb had at least a Play and Stop method. The alternative SkiaSharp.Extended.UI.Maui doesn't provide these methods. Therefore, it's very hard to control animations in code.

[mattleibow]

I think all of these actions can be performed using properties:

• IsAnimationEnabled - true is start and false is stop
• Progress - TimeSpan of the progress
• Duration - TimeSpan of the total time

If you want to get a percent progress then you can convert the Duration into TotalSeconds and then use that to get a percentage and convert back into a TimeSpan for the Progress property.

[IeuanWalker]

@mattleibow in order to achieve what i described in the issue, you'd need to do a while loop to monitor the progress in order to change IsAnimationEnabled false at the right time.

You also can't reverse the animation either.

---

For example, if you want to create an animated toggle using the following file - https://lottiefiles.com/127464-animated-switch-ae-version

(for the sake of the example let's just assume there are 100 frames in the animation)

When going from false to true, you'd want to play frames 0 to 80 Then going from true to false, you'd want to play frame 80 - 0 (reverse animation)

The playSegments in this API automatically handles all that (the stopping at the right frame and changing the direction of the animation)

Sorry in the issue I mentioned goToAndStop API when I meant the playSegments API

[nk-alex]

As @mattleibow said, you can play with those properties to be able to play just certain frames forward and backwards. You don't really need any loop to keep on checking the animation progress.

public void PlayLottieAnimation(SKLottieView lottieAnimation, 
        TimeSpan startPoint, TimeSpan playDuration, SKLottieRepeatMode repeatMode)
{
    Task.Run(async() =>
    {
        lottieAnimation.RepeatMode = repeatMode;
        lottieAnimation.Progress = startPoint;
        lottieAnimation.IsAnimationEnabled = true;

        await Task.Delay(playDuration);
        lottieAnimation.IsAnimationEnabled = false;
    });
}

//XAML

<skia:SKLottieView
        x:Name="animationView"
        Source="animation.json"
        HeightRequest="60"
        WidthRequest="60"
        Progress="0"
        IsAnimationEnabled="False"
        VerticalOptions="Center"
        HorizontalOptions="Center">

//Code behind

PlayLottieAnimation(this.animationView, new TimeSpan(0), 
        new TimeSpan(0, 0, 0, 0, 700), 
        SkiaSharp.Extended.UI.Controls.SKLottieRepeatMode.Restart)

PlayLottieAnimation(this.animationView, new TimeSpan(0, 0, 0, 0, 700), 
        new TimeSpan(0, 0, 0, 0, 700), 
        SkiaSharp.Extended.UI.Controls.SKLottieRepeatMode.Reverse)

In my case I play the animation from 0 to millisecond 700. Then from 700 back to 0. In case you want to work with percentages, you can do it as well with a little math taking into account:

• Duration: A value indicating the total duration of the animation
• Progress: The current playback progress of the animation.