I trying to animate the changes between points which I have drawn in canvas, check output preview in...

# compose

[Rajashekar]

I trying to animate the changes between points which I have drawn in canvas, check output preview inside thread.

val points: List<Offset> = listOf(
    Offset(200f, 200f), Offset(400f, 200f),
    Offset(200f, 200f), Offset(200f, 400f),
    Offset(400f, 200f), Offset(400f, 400f),
    Offset(200f, 400f), Offset(400f, 400f),
    Offset(200f, 400f), Offset(200f, 600f),
    Offset(200f, 600f), Offset(400f, 600f),
    Offset(400f, 400f), Offset(400f, 600f),
)

Two offsets completes a line, this whole points makes -> 8
How I want is, lines must be drawn between those points at certain duration.

Canvas(
    modifier = Modifier.fillMaxSize()
) {
    drawPoints(
        points = points,
        pointMode = PointMode.Lines,
        color = Color.Gray,
        strokeWidth = 16f,
        cap = StrokeCap.Round,
        pathEffect = PathEffect.dashPathEffect(floatArrayOf(8f, 16f))
    )
}

[Rajashekar]

[Doris Liu]

How I want is, lines must be drawn between those points at certain duration.

Each individual line starts drawing simultaneously or sequentially?

[Rajashekar]

Sequentially.

[Rajashekar]

No wait simultaneously would be appropriate for my output.

[Doris Liu]

I would recommend animate to animate between each pair of `Offset`s: https://developer.android.com/reference/kotlin/androidx/compose/animation/core/package-summary#animate_1
There's sample code for the Float variant of animate (if you scroll up a little) that could help.

[Rajashekar]

Okay, I will look into it.

[Doris Liu]

Alternatively, you could animate just one float from 0 to 1, and interpolate between each pair of offset

[Rajashekar]

I just replaced this with drawLine and got rig of drawPoints.
And as you said, now I have tried interpolating offsets.