androidandroid-jetpack-composeandroid-animationlottie

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)