如何在“组合多段路径”中制作动画

Question

假设我有一个包含多个段的路径（moveTo 和 lineTo）。

如何使用 Compose 为该路径的绘制设置动画？

Answer 1

这是一个小例子。

@Composable
fun DrawPathAnimation() {
    val drawPathAnimation = remember { Animatable(0f) }
    val pathMeasure by remember { mutableStateOf(PathMeasure()) }

    LaunchedEffect(key1 = Unit, block = {
        drawPathAnimation.animateTo(
            1f,
            animationSpec = tween(3000, delayMillis = 300, easing = LinearEasing)
        )
    })

    Canvas(modifier = Modifier.fillMaxSize()) {
        val line = Path()
        line.moveTo(0f, size.center.y)
        line.lineTo(size.center.x, size.center.y - 200f)
        line.lineTo(size.width, size.center.y)
        line.lineTo(size.center.x, size.center.y + 200f)
        line.lineTo(0f, size.center.y)

        pathMeasure.setPath(line, false)
        line.reset()
        pathMeasure.getSegment(
            startDistance = 0f,
            stopDistance = drawPathAnimation.value * pathMeasure.length,
            destination = line,
            startWithMoveTo = true
        )

        drawPath(
            path = line,
            color = Color.White,
            style = Stroke(
                width = 5f,
            )
        )
    }
}

欲了解更多信息， 您可以参考这些链接：

1. 如何在jetpack compose canvas上设置drawPath()动画
2. 如何在画布下方绘制像jetpack compose中0.7路径一样的分段？