dotLottie Android Player Examples

Basic Animation

@Composable
fun BasicAnimation() {
    DotLottieAnimation(
        source = DotLottieSource.Url("https://lottie.host/294b684d-d6b4-4116-ab35-85ef566d4379/VkGHcqcMUI.lottie"),
        autoplay = true,
        loop = true,
        modifier = Modifier.size(200.dp)
    )
}

Animation with Controls

@Composable
fun ControlledAnimation() {
    val controller = remember { DotLottieController() }

    Column(
        modifier = Modifier.fillMaxSize(),
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        DotLottieAnimation(
            source = DotLottieSource.Asset("animation.lottie"),
            controller = controller,
            modifier = Modifier.size(200.dp)
        )

        Row(
            horizontalArrangement = Arrangement.SpaceEvenly,
            modifier = Modifier.fillMaxWidth()
        ) {
            Button(onClick = { controller.play() }) {
                Text("Play")
            }
            Button(onClick = { controller.pause() }) {
                Text("Pause")
            }
            Button(onClick = { controller.stop() }) {
                Text("Stop")
            }
        }

        Slider(
            value = controller.speed,
            onValueChange = { controller.setSpeed(it) },
            valueRange = 0f..2f,
            steps = 3
        )
    }
}

Freeze and Unfreeze

@Composable
fun FreezeExample() {
    val controller = remember { DotLottieController() }

    Column(horizontalAlignment = Alignment.CenterHorizontally) {
        DotLottieAnimation(
            source = DotLottieSource.Asset("animation.lottie"),
            autoplay = true,
            loop = true,
            controller = controller,
            modifier = Modifier.size(200.dp)
        )

        Row(horizontalArrangement = Arrangement.spacedBy(8.dp)) {
            Button(onClick = { controller.freeze() }) {
                Text("Freeze")
            }
            Button(onClick = { controller.unFreeze() }) {
                Text("Unfreeze")
            }
        }
    }
}

Animation with Event Listeners

@Composable
fun AnimationWithEvents() {
    val scope = rememberCoroutineScope()
    val context = LocalContext.current

    DotLottieAnimation(
        source = DotLottieSource.Asset("animation.lottie"),
        autoplay = true,
        loop = true,
        eventListeners = listOf(
            object : DotLottieEventListener {
                override fun onLoad() {
                    scope.launch {
                        Toast.makeText(context, "Animation loaded", Toast.LENGTH_SHORT).show()
                    }
                }

                override fun onPlay() {
                    scope.launch {
                        Toast.makeText(context, "Animation started", Toast.LENGTH_SHORT).show()
                    }
                }

                override fun onComplete() {
                    scope.launch {
                        Toast.makeText(context, "Animation completed", Toast.LENGTH_SHORT).show()
                    }
                }

                override fun onError(error: Throwable) {
                    Log.e("DotLottie", "Error: ${error.message}")
                }
            }
        )
    )
}

Loading from Raw Resources

@Composable
fun RawResourceAnimation() {
    DotLottieAnimation(
        source = DotLottieSource.Res(R.raw.animation),
        autoplay = true,
        loop = true,
        modifier = Modifier.size(200.dp)
    )
}

Dynamic Slot Customization

@Composable
fun SlotExample() {
    val controller = remember { DotLottieController() }

    Column(horizontalAlignment = Alignment.CenterHorizontally) {
        DotLottieAnimation(
            source = DotLottieSource.Asset("branded_animation.lottie"),
            autoplay = true,
            loop = true,
            controller = controller,
            modifier = Modifier.size(200.dp)
        )

        Row(horizontalArrangement = Arrangement.spacedBy(8.dp)) {
            Button(onClick = {
                controller.setColorSlot("primaryColor", Color.Red.toArgb())
                controller.setTextSlot("headline", "Red Theme")
            }) {
                Text("Red")
            }
            Button(onClick = {
                controller.setColorSlot("primaryColor", Color.Blue.toArgb())
                controller.setTextSlot("headline", "Blue Theme")
            }) {
                Text("Blue")
            }
            Button(onClick = {
                controller.clearSlots()
            }) {
                Text("Reset")
            }
        }
    }
}

Multiple Animations

@Composable
fun MultipleAnimations() {
    val controller = remember { DotLottieController() }
    var currentIndex by remember { mutableStateOf(0) }

    Column(
        modifier = Modifier.fillMaxSize(),
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        DotLottieAnimation(
            source = DotLottieSource.Asset("animations.lottie"),
            controller = controller,
            autoplay = true,
            loop = true,
            modifier = Modifier.size(200.dp)
        )

        Row(
            horizontalArrangement = Arrangement.SpaceEvenly,
            modifier = Modifier.fillMaxWidth()
        ) {
            Button(
                onClick = {
                    controller.manifest()?.animations?.let {
                        currentIndex = (currentIndex - 1).coerceAtLeast(0)
                        controller.loadAnimation(it[currentIndex].id)
                    }
                }
            ) {
                Text("Previous")
            }

            Button(
                onClick = {
                    controller.manifest()?.animations?.let {
                        currentIndex = (currentIndex + 1) % it.size
                        controller.loadAnimation(it[currentIndex].id)
                    }
                }
            ) {
                Text("Next")
            }
        }
    }
}

Theme Switching

@Composable
fun ThemeExample() {
    var isDarkTheme by remember { mutableStateOf(false) }
    val controller = remember { DotLottieController() }

    Column(
        modifier = Modifier.fillMaxSize(),
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        DotLottieAnimation(
            source = DotLottieSource.Asset("themed_animation.lottie"),
            controller = controller,
            autoplay = true,
            loop = true,
            themeId = if (isDarkTheme) "dark" else null,
            modifier = Modifier.size(200.dp)
        )

        Switch(
            checked = isDarkTheme,
            onCheckedChange = { isDarkTheme = it }
        )

        Text(if (isDarkTheme) "Dark Theme" else "Light Theme")
    }
}

Animation with State Machine

@Composable
fun StateMachineExample() {
    val controller = remember { DotLottieController() }
    var currentState by remember { mutableStateOf("") }

    Column(
        modifier = Modifier.fillMaxSize(),
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        DotLottieAnimation(
            source = DotLottieSource.Asset("interactive.lottie"),
            controller = controller,
            modifier = Modifier.size(200.dp)
        )

        LaunchedEffect(Unit) {
            controller.stateMachineLoad("main")
            controller.stateMachineStart(
                openUrl = OpenUrlPolicy(requireUserInteraction = true, whitelist = emptyList()),
                onOpenUrl = null
            )

            controller.stateMachineAddEventListener(object : StateMachineEventListener {
                override fun onStateEntered(enteringState: String) {
                    currentState = enteringState
                }
            })
        }

        Text("Current State: $currentState")

        Row(horizontalArrangement = Arrangement.spacedBy(8.dp)) {
            Button(
                onClick = { controller.stateMachinePostEvent(Event.Click(100f, 100f)) }
            ) {
                Text("Click")
            }

            Button(
                onClick = { controller.stateMachineSetBooleanInput("isActive", true) }
            ) {
                Text("Set Active")
            }
        }
    }
}

Layout and Fit

@Composable
fun LayoutExample() {
    val controller = remember { DotLottieController() }

    Column(horizontalAlignment = Alignment.CenterHorizontally) {
        DotLottieAnimation(
            source = DotLottieSource.Asset("animation.lottie"),
            autoplay = true,
            loop = true,
            controller = controller,
            modifier = Modifier.size(300.dp)
        )

        Row(horizontalArrangement = Arrangement.spacedBy(8.dp)) {
            Button(onClick = {
                controller.setLayout(Fit.CONTAIN, Pair(0.5f, 0.5f))
            }) {
                Text("Contain")
            }
            Button(onClick = {
                controller.setLayout(Fit.COVER, Pair(0.5f, 0.5f))
            }) {
                Text("Cover")
            }
            Button(onClick = {
                controller.setLayout(Fit.FILL, Pair(0.5f, 0.5f))
            }) {
                Text("Fill")
            }
        }
    }
}