Hi everyone, Is it possible to animate a Path whic...

# compose

[Nino]

Hi everyone,
Is it possible to animate a Path which has multiple moveTo? Or a Path that shouldn't draw for some discrete positions?

I'm trying to represent lines from a line chart as a Path which can support missing data between points, and I wish to animate them when displaying them for the first time.

[1] is the result I'm trying to achieve (I'm "cheating" with extra rects to hide the middle line that shouldn't appear)
[2] is what's currently working with only 1 moveTo (code in 🧵 thread)
[3] is the result with multiple moveTo

How could I approach this problem in a Canvas? I would have to display multiple lines with different animations so I'd like to have a performant approach, but I'm stuck with this "bug" (more a "lack of feature" because we don't always want a "linear jump" between 2 segments of a Path) with the PathMeasure.

Thank you!

Screen_recording_20250813_123204.mp4Screen_recording_20250813_122759.mp4Screen_recording_20250813_122847.mp4

[Nino]

val pathMeasure = remember { PathMeasure() }
val strokeProgress = remember { Animatable(0F) }

LaunchedEffect(Unit) {
    strokeProgress.animateTo(1F, tween(2_000))
}

Canvas(modifier = Modifier.fillMaxSize()) {
    val path = Path().apply {
        moveTo(0F, size.height / 2)
        lineTo(size.width / 3, 0F)
        lineTo(size.width * 2 / 3, size.height / 2) // <-- Using moveTo here breaks the animation!
        lineTo(size.width, size.height / 2)
    }

    pathMeasure.setPath(path, forceClosed = false)

    val animatedPath = Path()
    pathMeasure.getSegment(
        startDistance = 0F,
        stopDistance = pathMeasure.length * strokeProgress.value,
        destination = animatedPath,
    )

    drawPath(
        path = animatedPath,
        color = Color.Magenta,
        style = Stroke(2.sp.toPx()),
    )
}

[romainguy]

You can use Path.divide to split the path into multiple paths and animate them one by one. See https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Path#(androidx.compose.ui.graphics.Path).divide(kotlin.collections.MutableList)

[romainguy]

Or create several paths to begin with.

[Nino]

Hello, yes in the end I just ended up using drawLine for each segment directly, animating it was a bit of a challenge 😄