[SOLVED] How can I achieve the equivalent of LottieAnimationView.setFrame(int frame) in Lottie in Jetpack Compose?

How can I achieve the equivalent of LottieAnimationView.setFrame(int frame) in Lottie in Jetpack Compose?

I am using a Lottie animation, but if the user has turned off animation from their accessibility settings, then I just want to load the animation with a given frame number.

In the native(non-compose) version, I was using this convenient method LottieAnimationView.setFrame(int frame) which was working as expected.

Now we are migrating native screens to Jetpack Compose and I can't find a way to load a animation with a given frame number.

How can I achieve a LottieAnimationView.setFrame(int frame) effect in compose version?

Solution

I believe what you are looking for is LottieClipSpec

Use LottiesClipSpec with Frame specs and specify argument as per your need. All params are optional for Frame specs.

...

LottieAnimation(
    composition = composition,
    clipSpec = LottieClipSpec.Frame(
        min = <Int>, 
        max = <Int>, 
        maxInclusive = <Bool>
    )
)

...

There are different ways to load the animation like Frame, Progress and Markers.

Just check this once https://github.com/airbnb/lottie-android/blob/master/lottie-compose/src/main/java/com/airbnb/lottie/compose/LottieClipSpec.kt

The another approach is, Use LottieAnimationView inside composable AndroidView (Not preferable)