Progress: iris
A circular reveal whose radius follows a progress value.
Progress iris shows an element through a circle that grows with a value you control. Use it for a reveal tied to a scroll or a gesture, or to open content as a foldable opens.
Usage
The sample reveals an image placeholder from its center as progress goes from 0 to 1.
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.graphics.TransformOrigin
import androidx.compose.ui.unit.dp
import com.jantursky.kapow.ProgressEffect
import com.jantursky.kapow.progressEffect
@Composable
fun RevealCard(progress: () -> Float) {
Box(
Modifier
.size(200.dp)
.background(Color(0xFF6B62F2))
.progressEffect(ProgressEffect.iris(origin = TransformOrigin.Center), progress),
)
}Parameters
| Parameter | Default | Description |
|---|---|---|
origin |
TransformOrigin.Center |
The point the circle grows from, as a fraction of the element’s size. TransformOrigin(0f, 0f) is the top left corner. |
softEdge |
0.dp |
How wide the soft edge of the circle is. 0.dp gives a hard edge. The element is fully shown at 1 whatever the edge. It applies to the round iris, not to a custom shape. |
shape |
null |
Reveals through this shape, grown from origin, instead of a circle. Null is a circle. |
invert |
false |
Hides the element inside the iris instead: it is fully shown at 0 and gone at 1. |
Reduced motion
Progress effects do not animate on their own. The element is revealed as far as the progress says.
Notes
- At progress 0 nothing is visible. At progress 1 the whole element is.
- The reveal is a mask, so it works on all targets without blur or shaders.
- The iris transition is the timed version of the same reveal.