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

When using Lottie for animation design, loading animations and pausing at specific frames is a common requirement, which can be used to highlight certain animation elements or create pause effects. Below, we will explain how to implement this functionality on Android and iOS.

Android

On the Android platform, you can load and control animations using the Lottie library. First, ensure that the Lottie library dependency is added to the project's build.gradle file:

gradle
dependencies {
    implementation 'com.airbnb.android:lottie:3.4.0'
}

Add a LottieAnimationView control to the layout file:

xml
<com.airbnb.lottie.LottieAnimationView
    android:id="@+id/animation_view"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:lottie_fileName="animation.json" // Specify the animation file
    app:lottie_autoPlay="false" // Do not auto-play the animation
    app:lottie_loop="false" // Do not loop the animation
    />

Next, in the Activity or Fragment, load the animation and pause at the specified frame:

java
LottieAnimationView animationView = findViewById(R.id.animation_view);

// Load the animation
animationView.setAnimation("animation.json");
animationView.playAnimation();

// Pause at the specified frame
int frameToPause = 50; // Assume we pause at frame 50
animationView.addAnimatorUpdateListener(valueAnimator -> {
    float frame = (float) valueAnimator.getAnimatedValue() * animationView.getMaxFrame();
    if (frame > frameToPause) {
        animationView.pauseAnimation(); // Pause the animation
    }
});

iOS

On the iOS platform, you can load and control animations using the Lottie iOS library. First, add the Lottie library using CocoaPods:

ruby
pod 'lottie-ios'

Next, use Lottie in your Swift file:

swift
import Lottie

let animationView = AnimationView(name: "animation")
animationView.frame = CGRect(x: 0, y: 0, width: 300, height: 300)
animationView.contentMode = .scaleAspectFill
animationView.loopMode = .playOnce // Do not loop the animation
view.addSubview(animationView)

// Play the animation
animationView.play()

// Pause at the specified frame
let frameToPause: AnimationFrameTime = 50 // Pause at frame 50
animationView.currentFrame = frameToPause
animationView.pause()

In the above code, we first import the Lottie library, then create an AnimationView instance and set the animation file. After that, we play the animation and pause at the specified frame.

Through these steps, you can load animations and pause at specific frames in Lottie on both Android and iOS platforms. This is very useful when creating interactive animations or user guidance features.