Controlling Player

The DotLottieAnimation composable function provides a range of options for controlling the playback of Lottie animations. You can control the playback speed, canvas size, and looping behavior of the animation.

Playback Control

@Preview()
@Composable
fun DotLottiePreview() {
    val  controller = remember { DotLottieController() }
    Surface {
        Column {
            DotLottieAnimation(
                source = DotLottieSource.Url("https://lottie.host/my-example.json"),
                autoplay = false,
                loop = true,
                controller = controller,
                modifier = Modifier.pointerInput(UInt) {
                    detectTapGestures(
                        onPress = {
                            // Play animation when pressing on
                            controller.play()
                            tryAwaitRelease()
                            // Pause when releasing
                            controller.pause()
                        },
                    )
                }
            )
            Button(onClick = {
                controller.setSpeed(2f)
            }) {
                Text(text = "2x")
            }
            Button(onClick = {
                controller.setPlayMode(Mode.REVERSE)
            }) {
                Text(text = "Reverse")
            }
        }
    }
}

Multiple Animations .lottie

Intially player renders defaultAnimation from .lottie file. You can change the animation by passing animationId to loadAnimation method on the controller.

Using the manifest().animations you can get the list of animations in the .lottie file.

@Preview()
@Composable
fun DotLottiePreview() {
    val controller = remember { DotLottieController() }
    val currentIndex = remember { mutableIntStateOf(0) }
    Column {
        DotLottieAnimation(
            source = DotLottieSource.Url("https://lottie.host/294b684d-d6b4-4116-ab35-85ef566d4379/VkGHcqcMUI.lottie"),
            autoplay = true,
            loop = true,
            controller = controller,
        )
        Button(onClick = {
            controller.manifest()?.animations?.let {
                currentIndex.intValue =
                    if (currentIndex.intValue == it.size - 1) 0 else currentIndex.intValue + 1
                controller.loadAnimation(it[currentIndex.intValue].id)
            }
        }) {
            Text(text = "Next")
        }
        Button(onClick = {
            controller.manifest()?.animations?.let {
                currentIndex.intValue =
                    if (currentIndex.intValue <= 0) it.size - 1 else currentIndex.intValue - 1
                controller.loadAnimation(it[currentIndex.intValue].id)
            }
        }) {
            Text(text = "Previous")
        }
    }
}

To learn more about the DotLottieController and its functionalities, refer to the DotLottieController API reference.