英文:
How to animate drawPath() on jetpack compose canvas
问题
我使用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))
}
我想要对这个形状进行绘制动画，使其看起来像这样：
动画化的心形。
在Android上是否有可能实现这样的动画？
英文:
I have drawn a heart using path.cubicTo() method
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))
}
I want to animate the drawing of the shape, so it looks like this:
Animated Heart,
is it possible to do animations like this on android?
答案1
得分: 3
你可以使用PathMeasure API中的getSegment()函数来获取路径的一部分，该部分位于特定长度处。
因此，如果你知道Path的长度（从PathMeasure.getLength()获得），然后可以将长度的一部分传递给getSegment() API来获取路径的一部分。
例如：
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)
// 在动画的百分比位置获取路径的一部分，以显示在屏幕上进行绘制的动画
pathMeasure.getSegment(
0f,
drawPathAnimation.value * pathMeasure.length, newPath
)
newPath
}
}
// 使用DrawScope绘制路径。
一旦路径绘制的动画完成运行，你需要对心形图案进行缩放和颜色的动画。你可以使用DrawScope.scale并传入一个动画百分比。
要动画化alpha值，有几种选项：你可以使用Modifier.graphicsLayer { alpha = animatedValue }，或者你可以更改drawPath()命令的颜色，并使用带有设置alpha值的颜色，例如：Color.Black.copy(alpha = animatedValue)。
有关在Compose中进行动画的更多信息，请查看这些文档，或者查看这个视频，了解在Compose中开始绘制，它还有一个关于动画的视频示例。
英文:
You can use the PathMeasure API - getSegment() function to get a segment of a Path, at a certain length.
So if you know the length of the Path (obtained from PathMeasure.getLength()), you can then get a segment of a path passing a fraction of the length to the getSegment() API.
For example:
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.
Once that animation has finished running for the path drawing, you need to animate the scaling up and colour of the heart. You can use
DrawScope.scale passing in an animated fraction.
To animate the alpha, there are a few options: you can use Modifier.graphicsLayer { alpha = animatedValue }, or you can change the color of the drawPath() command and use a color that has an alpha set, example: Color.Black.copy(alpha = animatedValue)
For more information on animations in Compose - check out these docs, or this video on getting started with drawing in Compose, it also has a video example of animations.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论