Hi. How can I apply gradient from start to end of ...

# compose

[Tin Tran]

Hi. How can I apply gradient from start to end of an arc only? I want to draw an arc like the image and animate it to rotate in a circle

[Colton Idle]

I asked a similar question in the past and got an answer of

"you can draw the path with a sweepGradient with the starting and ending colors being the faded/non faded colors respectively"

I looked at my code and I didn't end up working with a sweep for some reason, but chose a linear gradient instead.

drawPath(
    path = path,
    brush =
        Brush.linearGradient(
            colorStops =
                arrayOf(
                    0.1f to Color(0x00ff0000),
                    .2f to Color(0xFFff0000),
                    .8f to Color(0xFFff0000),
                    .9f to Color(0x00ff0000),
                ),
        ),

[Tash]

you could do the same with sweepGradient by making sure color stops are passed instead of just a list of colors

Brush.sweepGradient(
             0.0f to Color.Red,
             0.3f to Color.Green,
             1.0f to Color.Blue,
             center = Offset(0.0f, 100.0f)
)

[Tash]

sweepGradient helps especially if you want the leading edge to go back to the starting color when it completes the arc

[Tin Tran]

Thanks guys! I ended up export the circle vector and animate the rotation 😅. I’ll try your solution to night.