如何在jetpack compose画布上为drawPath()设置动画

Question

我使用 path.cubicTo() 方法画了一颗心

Canvas(modifier = Modifier.size(100.dp)) {
            val path = Path()
            path.moveTo(0f, size.height / 3)

            path.cubicTo(0f, 0f, size.width / 2, 0f, size.width / 2, size.height / 3)
            path.cubicTo(size.width / 2, 0f, size.width, 0f, size.width, size.height / 3)

            path.cubicTo(
                size.width,
                size.height * 2 / 3,
                size.width / 2,
                size.height,
                size.width / 2,
                size.height
            )
            path.cubicTo(
                0f,
                size.height * 2 / 3,
                0f,
                size.height / 2,
                0f,
                size.height / 3
            )
            drawPath(color = Color.Red, path = path, style = Stroke(5f))
        }

我画的心

我想对形状的绘制进行动画处理，所以它看起来像这样： Animated Heart，是否可以在android上做这样的动画？

Answer 1

您可以使用PathMeasureAPIgetSegment()函数获取特定长度的路径段。

Path因此，如果您知道（从 获得）的长度PathMeasure.getLength()，则可以通过将长度的一小部分传递给 API 来获取路径的一段getSegment()。

例如：

    val drawPathAnimation = remember {
        Animatable(0f)
    }
    val pathMeasure = remember {
        PathMeasure()
    }
    LaunchedEffect(key1 = Unit, block = {
        drawPathAnimation.animateTo(
            1f,
            animationSpec = tween(2000)
        )
    })
    val animatedPath = remember {
        derivedStateOf {
            val newPath = Path()
            pathMeasure.setPath(fullGraphPath.value, false)
            // get a segment of the path at the percentage of the animation, to show a drawing on
            // screen animation
            pathMeasure.getSegment(
                0f,
                drawPathAnimation.value * pathMeasure.length, newPath
            )
            newPath
        }
    }
   // draw the path using DrawScope.

一旦该动画完成路径绘制的运行，您就需要为心形的放大和颜色设置动画。您可以使用 DrawScope.scale传入动画分数。

要为 alpha 设置动画，有几个选项：您可以使用Modifier.graphicsLayer { alpha = animatedValue }，或者可以更改命令的颜色drawPath()并使用具有 alpha 设置的颜色，例如：Color.Black.copy(alpha = animatedValue)

有关 Compose 中的动画的更多信息 - 请查看这些文档，或有关 Compose 中绘图入门的视频，它还有动画的视频示例。