Transition: checker
A checkerboard reveal where the squares of one color open first, then the others.
Checker opens content through a checkerboard. The squares of one color grow from their middles first, then the squares of the other color follow, so the reveal comes in two waves. Use it for tiles on a game board, a level that unlocks, or any grid-shaped content.
Usage
The sample opens a level tile through 32 dp squares and closes it the same way.
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.size
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.KapowAnimatedVisibility
import com.jantursky.kapow.KapowEnter
import com.jantursky.kapow.KapowExit
@Composable
fun LevelTile(visible: Boolean) {
KapowAnimatedVisibility(
visible = visible,
enter = KapowEnter.checker(cellSize = 32.dp),
exit = KapowExit.checker(cellSize = 32.dp),
) {
Box(Modifier.size(160.dp).background(Color.DarkGray))
}
}Parameters
| Parameter | Default | Description |
|---|---|---|
cellSize |
24.dp |
The side of one square of the board. Must be at least 2 dp. |
duration |
600.milliseconds |
How long the transition takes. Must be positive. |
order |
CheckerOrder.Together |
The order the squares open in. Together opens the squares of one color at once, then the other color. Diagonal sweeps from the top-left corner to the bottom-right, Random opens them in a seeded random order, and Spiral goes outward from the middle in a turn. The exit runs the order in reverse. |
seed |
41 |
The seed of CheckerOrder.Random. The same seed gives the same order on every target. Ignored by the other orders. |
Every transition also has .delay(...), .easing(...) and .reducedMotion(...). See Stagger.
Reduced motion
The transition becomes a fade over the same duration or shorter. There is no mask.
Notes
- Available as
KapowEnter.checker()andKapowExit.checker(). The exit runs the enter in reverse: the second color closes first. - Each wave takes 60 % of the duration, so the second starts before the first has finished.
- The squares are stretched slightly so a whole number of them fits the content. On a large element they grow, so a frame never draws more than about 4,000 of them.
- The mask is drawn with an offscreen layer and a blend mode, so it works on all targets, including Android API 23.