androidandroid-jetpack-composeandroid-animationlottieandroid-lottie

How to load Lottie animation and pause on given Frame number in Lottie compose

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

In 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 cant find a way to load a animation with a given frame number.

So just wanted to know how to achieve 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)