Jetpack Compose中如何在Canvas内实现动画或状态变更并获取其尺寸？

你可以通过两种常用方案实现Canvas尺寸和动画的联动：

方案1：通过onSizeChanged修饰符获取Canvas实际尺寸 #

这个方案可以拿到Canvas渲染后的真实尺寸，适配性最高：

1. 首先在可组合函数中声明可变状态存储Canvas尺寸：

var canvasSize by remember { mutableStateOf<Size?>(null) }

2. 给Canvas添加onSizeChanged修饰符，拿到尺寸后更新状态：

Canvas(modifier = Modifier
        .padding(start = 60.dp, end = 60.dp)
        .fillMaxSize()
        .onSizeChanged { size ->
            canvasSize = Size(size.width.toFloat(), size.height.toFloat())
        },
        onDraw = {
            // 原有绘制逻辑保持不变，直接使用anim变量即可
        }
)

3. 动画声明依赖canvasSize状态，尺寸加载完成后自动触发动画：

val ballAnim = remember { Animatable(0f) }
LaunchedEffect(canvasSize) {
    canvasSize?.let { size ->
        ballAnim.animateTo(
            // 这里可以用size.width、size.height自定义目标值
            targetValue = size.width /4 - 10f,
            animationSpec = tween(durationMillis = 1000) // 替换为你需要的动画配置
        )
    }
}
val anim by ballAnim.asState()

方案2：使用BoxWithConstraints提前获取布局尺寸 #

如果你的Canvas占满父布局可用空间，用这个方案更简洁，可以直接在动画声明时拿到尺寸：

BoxWithConstraints(
    modifier = Modifier
        .padding(start = 60.dp, end = 60.dp)
        .fillMaxSize()
) {
    // 直接将可用宽高转为像素值，直接用于动画参数
    val canvasWidth = maxWidth.toPx()
    val canvasHeight = maxHeight.toPx()

    val anim by ballAnim.animateFloat(
        initialValue = 0f,
        targetValue = canvasWidth / 4 - 10f,
        animationSpec = tween(durationMillis = 1000)
    )

    Canvas(modifier = Modifier.fillMaxSize(), onDraw = {
        // 原有绘制逻辑保持不变
    })
}

注意事项

• 若Canvas未占满父布局全部空间，BoxWithConstraints拿到的尺寸会大于Canvas实际尺寸，这种场景优先使用onSizeChanged方案
• 尺寸未获取到的初始阶段可以给动画设置默认占位值，尺寸加载完成后动画会自动更新，不会影响正常渲染

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