Conditional: bubbles
Small bubbles rise from an element and pop while a condition is true.
Bubbles lets small, see-through bubbles rise from the top edge of an element while a condition holds. They wobble a little on the way up, then swell and pop. Use it for something fizzy, brewing or underwater: a fresh drink, a fish tank, a task that is bubbling along.
Usage
The sample lets a drink fizz while it is fresh.
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import com.jantursky.kapow.ConditionalEffect
import com.jantursky.kapow.conditionalEffect
@Composable
fun SodaTile(fresh: Boolean) {
Box(
Modifier
.size(width = 160.dp, height = 110.dp)
.conditionalEffect(fresh, ConditionalEffect.bubbles())
.background(Color(0xFF3D7BFF), RoundedCornerShape(10.dp)),
)
}Parameters
| Parameter | Default | Description |
|---|---|---|
color |
Color(0xFF9ED8FF) |
Color of the bubbles’ rim and their faint fill. |
size |
10.dp |
Diameter of the largest bubble. |
rate |
1f |
How often bubbles come, as a factor: 2 is twice as many. Must be positive. |
wobble |
3.dp |
How wide a bubble sways from side to side. Must not be negative. |
pop |
true |
Whether a bubble swells and pops at the end of its life. Without it the bubble thins out gently. |
colorVariation |
0f |
How much the bubbles differ in tint, from 0 (all color) to 1. |
physics |
ParticlePhysics.Default |
How the particles launch and move: cone, speed, lifetime, gravity, drag, size, spin, fade, start and end scale and emission area. Parts left out keep the effect’s own values; blend mode and color pick are ignored. The lifetime sets how high the bubbles rise. |
seed |
0 |
The start of the random numbers that place and shape the bubbles. |
Reduced motion
No bubbles are emitted.
Notes
- Bubbles are particles. They draw through a particle layer when one is above the element, so a clipping parent does not cut them off. Without one they draw around the element.
- A bubble starts every 0.16 s from somewhere along the top edge and rises for 0.9 to 1.5 s.
- When the condition turns false, no new bubbles start and the ones in flight rise and pop.
- Bubbles do not follow the element if it moves.