Transition: tear
A wipe whose leading edge is torn like paper.
Tear is a wipe with a ragged edge: an irregular tear with a light rim of paper along it. Use it for things made of paper in your UI, such as a coupon, a ticket, a receipt or a note.
Usage
The sample tears a coupon in from the left and tears it off 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 Coupon(visible: Boolean) {
KapowAnimatedVisibility(
visible = visible,
enter = KapowEnter.tear(angle = 0f, toothSize = 12.dp),
exit = KapowExit.tear(angle = 0f, toothSize = 12.dp),
) {
Box(Modifier.size(260.dp, 130.dp).background(Color.DarkGray))
}
}Parameters
| Parameter | Default | Description |
|---|---|---|
angle |
0f |
The direction the edge moves in, in degrees: 0 is rightward, 90 downward. |
toothSize |
12.dp |
How far the tear strays off a straight line. Its jags come at under half of that apart. Must be at least 2 dp. |
duration |
500.milliseconds |
How long the transition takes. Must be positive. |
roughness |
0.4f |
How jagged the tear is, from 0 (a slow wander with no jags) to 1 (all jags). |
rimColor |
white at 75 % | The color of the rim along the edge, drawn over the content. Pass a transparent color for no rim. |
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.tear()andKapowExit.tear(). The exit runs the edge backward, covering the content. - The tear is irregular but seeded, so it is the same on every run.
- The rim is a thin white line drawn on the content’s own pixels, so it does not show on white content.
- The mask is drawn with an offscreen layer and a blend mode, so it works on all targets, including Android API 23.