Compose Multiplatform animation library parses Adobe After Effects animations, inspired by Airbnb/Lottie. Features include loading animations from files, URLs, or JSON strings, controlling playback, adjusting speed, setting iterations, and observing state changes.
Compose Multiplatform animation library that parses Adobe After Effects animations. Inspired by Airbnb/Lottie.
Add the dependency in your common module's commonMain source set:
implementation("io.github.ismai117:kottie:latest_version")
For iOS, add the Lottie framework via Swift Package Manager:
https://github.com/airbnb/lottie-spm.git// Load composition
val composition = rememberKottieComposition(
KottieCompositionSpec.Url("https://example.com/animation.json")
)
// Animate
val animationState by animateKottieCompositionAsState(
composition = composition,
iterations = Kottie.IterateForever
)
// Display
KottieAnimation(
composition = composition,
progress = { animationState.progress },
modifier = Modifier.size(300.dp)
)
Load animations from different sources using KottieCompositionSpec:
// From URL
val composition = rememberKottieComposition(
KottieCompositionSpec.Url("https://example.com/animation.json")
)
// From file (using Compose Resources)
var json by remember { mutableStateOf("") }
LaunchedEffect(Unit) {
json = Res.readBytes("files/animation.json").decodeToString()
}
val composition = rememberKottieComposition(KottieCompositionSpec.File(json))
// From JSON string
val composition = rememberKottieComposition(
KottieCompositionSpec.JsonString("""{"v":"5.7.4",...}""")
)
KottieComposition is a sealed type with three states:
when (composition) {
is KottieComposition.Loading -> {
CircularProgressIndicator()
}
is KottieComposition.Success -> {
KottieAnimation(
composition = composition,
progress = { animationState.progress }
)
}
is KottieComposition.Failure -> {
Text("Error: ${composition.error.message}")
}
}
var isPlaying by remember { mutableStateOf(true) }
val animationState by animateKottieCompositionAsState(
composition = composition,
isPlaying = isPlaying
)
Button(onClick = { isPlaying = !isPlaying }) {
Text(if (isPlaying) "Pause" else "Play")
}
val animationState by animateKottieCompositionAsState(
composition = composition,
speed = 1.5f
)
// Play 3 times
val animationState by animateKottieCompositionAsState(
composition = composition,
iterations = 3
)
// Loop forever
val animationState by animateKottieCompositionAsState(
composition = composition,
iterations = Kottie.IterateForever
)
val animationState by animateKottieCompositionAsState(
composition = composition,
iterations = Kottie.IterateForever
)
LaunchedEffect(animationState) {
println("Progress: ${animationState.progress}")
println("Playing: ${animationState.isPlaying}")
println("Completed: ${animationState.isCompleted}")
println("Iteration: ${animationState.iteration}")
}
Copyright 2024 ismai117
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Contributions are welcome! Feel free to open issues or submit pull requests.
Surfaced from shared tags and platforms — no rankings paid for.