[SOLVED] Implementing a ‘Magic Sparks’ Animation in Jetpack Compose

Implementing a ‘Magic Sparks’ Animation in Jetpack Compose

I’m currently working on a project using Jetpack Compose and Kotlin, and I’m trying to implement a ‘magic sparks’ animation. This animation should be triggered when the user performs a certain action or clicks on a button. However, I’m not sure where to start, as I understand that Jetpack Compose may not have a built-in particle system.

‘Magic sparks’ is a visual effect where a burst of small, light particles (the ‘sparks’) are emitted from a source, often accompanied by a bright glow.

I’m looking for guidance on how to approach this problem. Specifically, I would like to know:

Is there a way to create a particle system in Jetpack Compose? If not, what are some alternative methods or libraries that I could use to achieve a similar effect? For reference, I found a video that shows the type of animation I’m trying to implement https://www.youtube.com/watch?v=wBFtnFLGMEw.

Solution

I found a library that is generally not bad for describing simple particle system effects.

https://github.com/DanielMartinus/Konfetti/tree/main

Party(
    speed = 0f,
    maxSpeed = 30f,
    damping = 0.9f,
    spread = 360,
    colors = listOf(0xfce18a, 0xff726d, 0xf4306d, 0xb48def),
    emitter = Emitter(duration = 100, TimeUnit.MILLISECONDS).max(100),
    position = Position.Relative(0.5, 0.3)
)
viewKonfetti.start(party)