animated-gradient-border-ring

name

animated-gradient-border-ring

description

A rotating sweep-gradient ring around a card, chip or button, built from a clipped box, a full-size gradient and an opaque inset surface parked on its middle — where the modifier order is the whole mechanism and no blend mode is involved — plus why the SrcIn-inside-an-offscreen-layer version of this cannot draw a ring, and what that layer costs. Use when the gradient covers the whole surface instead of the border, when the ring is invisible, when it bleeds over whatever is behind the widget, or when a row of them makes scrolling expensive.

A rotating gradient ring, masked to a border

The ring is not a stroke, and it is not a mask either. It is a gradient painted across the whole widget with an opaque surface parked on top of its middle; the ring is the gap that surface does not cover. Everything rests on modifier order — the gradient has to be drawn outside the padding that insets the surface, or it never reaches the gap at all.

// reconstructed, not lifted: the shipped component orders these differently — see the recorded
// suspicion below. The transition, the brush and the radius are the source's.
val transition = rememberInfiniteTransition(label = "ring")
val degrees by transition.animateFloat(
    initialValue = 0f,
    targetValue = 360f,
    animationSpec = infiniteRepeatable(
        animation = tween(durationMillis = oneCycleMillis, easing = LinearEasing),
        repeatMode = RepeatMode.Restart,
    ),
    label = "ringAngle",
)
val grow by animateFloatAsState(if (isAnimated) 1f else , tween())

Box(
    modifier = Modifier
        .clip(shape)                  
        .drawBehind {                 
            scale(scale = grow) {
                rotate(degrees = degrees) {
                    drawCircle(brush = brush, radius = size.width)   
                }
            }
        }
        .padding(borderWidth),        
) {
    Surface(color = backgroundColor, shape = shape) { content() }    
}