Hello, I’d like to have a radial gradient that rev...

# compose

[nuhkoca]

Hello, I’d like to have a radial gradient that revolves a circle in clockwise infinitely. I did something with LinearBrush not RadialBrush but it is not I expect. More in thread.

[nuhkoca]

The code

val infiniteTransition = rememberInfiniteTransition()

val offset by infiniteTransition.animateFloat(
    initialValue = 0f,
    targetValue = 1f,
    animationSpec = infiniteRepeatable(
        animation = tween(durationMillis = 1000, easing = LinearEasing),
        repeatMode = RepeatMode.Reverse
    )
)

val gradient = listOf(TRTheme.colors.grey3, TRTheme.colors.background)

Box(
    modifier = Modifier
        .size(250.dp)
        .padding(TRTheme.spacing.double)
) {
    val brush = remember(offset) {
        object : ShaderBrush() {
            override fun createShader(size: Size): Shader {
                val widthOffset = size.width * offset
                val heightOffset = size.height * offset
                return LinearGradientShader(
                    colors = gradient,
                    to = Offset(widthOffset, heightOffset),
                    from = Offset(widthOffset + size.width, heightOffset + size.height),
                    tileMode = TileMode.Mirror
                )
            }
        }
    }

    Canvas(modifier = Modifier.fillMaxSize()) {
        drawArc(
            brush = brush,
            startAngle = 0f,
            sweepAngle = 360f,
            useCenter = false,
            style = Stroke(width = DefaultChartStrokeWidth.toPx())
        )
    }
}

[Rebecca Franks]

SweepGradient is what you are looking for, just make sure to set the first and the last color in the list of colors to be the same color if you want it to not have a visible color difference where the edges meet.

[nuhkoca]

Thanks a lot people!