Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ismai117/kottie
Render After Effects Animations Library - Compose Multiplatform | Inspired by Airbnb/Lottie
https://github.com/ismai117/kottie
Last synced: 3 months ago
JSON representation
Render After Effects Animations Library - Compose Multiplatform | Inspired by Airbnb/Lottie
- Host: GitHub
- URL: https://github.com/ismai117/kottie
- Owner: ismai117
- License: apache-2.0
- Created: 2024-01-03T18:09:41.000Z (10 months ago)
- Default Branch: main
- Last Pushed: 2024-07-13T02:08:09.000Z (4 months ago)
- Last Synced: 2024-07-13T03:22:01.930Z (4 months ago)
- Language: Kotlin
- Homepage:
- Size: 66.4 MB
- Stars: 143
- Watchers: 2
- Forks: 8
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE.txt
Awesome Lists containing this project
- kmp-awesome - Kottie
- awesome - Kottie
README
[](https://github.com/ismai117/kottie/releases/latest)
[](https://github.com/ismai117/kottie/releases)
Kottie
Compose Multiplatform animation library that parses Adobe After Effects animations. Inspired by Airbnb/Lottie.
## Getting Started
To integrate Kottie into your Kotlin Multiplatform project
Add the dependency in your common module's commonMain source set
```
implementation("io.github.ismai117:kottie:latest_version")
```
In Xcode, select “File” → “Add Packages...”
Enter https://github.com/airbnb/lottie-spm.git
## Load Animation Composition
Load the animation composition using rememberKottieComposition function. Choose the appropriate specification for loading the composition (File, Url, or JsonString).
```Kotlin
var animation by remember { mutableStateOf("") }
LaunchedEffect(Unit){
animation = Res.readBytes("files/animation.json").decodeToString()
}
val composition = rememberKottieComposition(
spec = KottieCompositionSpec.File(animation) // Or KottieCompositionSpec.Url || KottieCompositionSpec.JsonString
)
```
## Display the Animation
Display the animation using KottieAnimation composable
```Kotlin
MaterialTheme {
Column(
modifier = modifier.fillMaxSize(),
horizontalAlignment = Alignment.CenterHorizontally,
verticalArrangement = Arrangement.Center
) {
KottieAnimation(
composition = composition,
progress = { animationState.progress },
modifier = modifier.size(300.dp)
)
}
}
```
## Control Animation Playback
You can control animation playback by using a mutableStateOf variable to toggle the animation on and off.
```Kotlin
var playing by remember { mutableStateOf(false) }
val animationState by animateKottieCompositionAsState(
composition = composition,
isPlaying = playing
)
MaterialTheme {
Column(
modifier = modifier.fillMaxSize(),
horizontalAlignment = Alignment.CenterHorizontally,
verticalArrangement = Arrangement.Center
) {
KottieAnimation(
composition = composition,
progress = { animationState.progress },
modifier = modifier.size(300.dp)
)
Button(
onClick = {
playing = true
}
){
Text("Play")
}
}
}
```
## Adjusting Speed
To change the playback speed of the animation, modify the speed parameter in the animateKottieCompositionAsState function. By default, the speed is set to 1f, indicating normal speed playback. You can increase the speed for faster playback or decrease it for slower playback.
```Kotlin
val animationState by animateKottieCompositionAsState(
composition = composition,
speed = 1.5f // Adjust the speed as needed
)
```
## Set Iterations
By default, the animation plays once and stops (iterations = 1). You can specify the number of times the animation should repeat using the iterations parameter. Alternatively, you can set it to KottieConstants.IterateForever for the animation to loop indefinitely.
```Kotlin
val animationState by animateKottieCompositionAsState(
composition = composition,
iterations = 3 // Play the animation 3 times
)
```
## Observing Animation State
You can observe animation state changes:
```Kotlin
LaunchedEffect(
key1 = animationState.isPlaying
) {
if (animationState.isPlaying) {
println("Animation Playing")
}
if (animationState.isCompleted) {
println("Animation Completed")
playing = false
}
}
```