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()@Composablefun 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()@Composablefun 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.