circularReveal
Collapses into a circle at your touch point.
The full recording — the example app on an Android
emulator and an iOS simulator at once, with circularReveal played several times
over. Scrub or pause with the controls.
The old screen shrinks into a circle centred on origin and disappears. Nothing translates — the pixels stay where they are and stop being drawn as the circle passes over them.
Options it takes
| Option | Type | Default | What it does here |
|---|---|---|---|
origin |
{ x: number; y: number } |
screen centre |
Where the effect starts, in dp. Pass a touch’s pageX/pageY as-is — the offset inside a modal or form sheet is corrected natively. |
durationMs |
number |
650 |
Animation length. Clamped up to this kind’s floor; 0 means no animation and is never clamped. |
settleFrames |
number |
2 |
Display frames to hold the snapshot before revealing, so the theme swap has painted underneath. |
Ignored by this kind: direction, angleDeg, shape, blurStyle, bands. Passing them is harmless.
Minimum duration
A request below 260ms is clamped up to it, natively, so both
platforms agree. Below that floor a full-screen copy coming apart has too few frames to
read as motion — the eye gets the start and the end and nothing in between, which looks
like a flicker rather than a fast transition. durationMs: 0 still means “no
animation” and is never clamped.
Usage
withThemeTransition(applyTheme, {
kind: 'circularReveal',
durationMs: 650,
origin: { x: pageX, y: pageY },
});How it is done
| iOS | CAShapeLayer mask + CABasicAnimation |
|---|---|
| Android | ViewAnimationUtils.createCircularReveal |