Jetpack Compose中如何绘制路径的0.7分段并实现描边动画？

要实现路径的分段绘制和动画，核心是用PathMeasure获取路径的长度信息，截取指定区间的路径片段，再结合Compose的动画API控制绘制进度。下面是针对你需求的具体实现方案：

实现步骤与代码示例 #

@Composable
fun AnimatedPathSegment() {
    // 控制路径绘制进度，0f代表未绘制，0.7f代表绘制到路径总长度的70%
    val progress by animateFloatAsState(
        targetValue = 0.7f,
        animationSpec = tween(durationMillis = 1500, easing = LinearEasing)
    )

    Canvas(modifier = Modifier.size(150.dp)) {
        val path = Path()
        val width: Float = size.width
        val height: Float = size.height
        path.apply {
            moveTo(width / 2, height / 5)
            cubicTo(
                5 * width / 14, 0f,
                0f, height / 15,
                width / 28, 2 * height / 5
            )
            cubicTo(
                width / 14, 2 * height / 3,
                3 * width / 7, 5 * height / 6,
                width / 2, height
            )
            cubicTo(
                4 * width / 7, 5 * height / 6,
                13 * width / 14, 2 * height / 3,
                27 * width / 28, 2 * height / 5
            )
            cubicTo(
                width, height / 15,
                9 * width / 14, 0f,
                width / 2, height / 5
            )
        }

        // 初始化路径测量工具
        val pathMeasure = PathMeasure()
        pathMeasure.setPath(path, forceClosed = true)
        val totalPathLength = pathMeasure.length

        // 创建存储分段路径的容器
        val segmentPath = Path()
        // 截取从起点到进度对应长度的路径片段
        pathMeasure.getSegment(
            startDistance = 0f,
            stopDistance = progress * totalPathLength,
            dst = segmentPath,
            startWithMoveTo = true
        )

        // 绘制最终的分段路径
        drawPath(
            color = Color.Red,
            path = segmentPath,
            style = Stroke(8f)
        )
    }
}

关键部分说明 #

• 进度动画控制：animateFloatAsState负责生成从0到0.7的平滑进度值，你可以调整durationMillis修改动画时长，或者通过交互（比如按钮点击）动态改变targetValue实现进度控制。
• PathMeasure的作用：
  • setPath绑定目标路径，forceClosed设为true是因为你的原始路径是闭合的，确保长度计算准确。
  • length属性获取路径的总长度，作为分段计算的基准。
• 路径截取逻辑：
  • getSegment方法截取指定区间的路径，startDistance设为0表示从路径起点开始，stopDistance用progress * totalPathLength动态控制绘制终点。
  • startWithMoveTo设为true，保证截取的路径起点与原路径一致，避免出现错位问题。

内容的提问来源于stack exchange，提问作者Abdullah