如何为Jetpack Compose的Composable实现圆形背景缩放动画？

我需要实现一个Composable函数（或Modifier扩展），能在其他Composable中调用，为目标组件添加红色圆形背景，且背景要缓慢进行10%的缩放变化。当前红色背景没有动画效果，想知道代码问题出在哪，要求组件内容保持不变，只有红色背景缩放。

当前效果：带有红色圆形背景的组件，但背景无任何缩放动画。

原代码：

@Composable
fun PulsatingCircle(content: @Composable () -> Unit) {
    val infiniteTransition = rememberInfiniteTransition()
    val scale by infiniteTransition.animateFloat(
        initialValue = 1f,
        targetValue = 2f, // 2 to see if it does really something quickly
        animationSpec = infiniteRepeatable(
            animation = tween(1700, easing = FastOutSlowInEasing),
            repeatMode = RepeatMode.Reverse
        )
    )

    Box(
        modifier = Modifier
            .layout { measurable, constraints ->
                val placeable = measurable.measure(constraints)
                val currentHeight = placeable.height
                val currentWidth = placeable.width
                val newDiameter = maxOf(currentHeight, currentWidth)
                val newScale = newDiameter * scale

                layout(newScale.toInt(), newScale.toInt()) {
                    placeable.placeRelative(
                        ((newScale - currentWidth) / 2).toInt(),
                        ((newScale - currentHeight) / 2).toInt()
                    )
                }
            }
            .background(color = Color.Red, shape = CircleShape)
    ) {
        content()
    }
}

代码问题分析 #

1. Modifier顺序错误：layout修改器在background之前，导致背景会覆盖整个调整后的布局区域，而你通过layout缩放的是整个Box的尺寸，这会连带内容一起被缩放，完全不符合“仅背景缩放”的需求。
2. 实现思路偏差：直接修改整个组件的布局尺寸，本质是让内容和背景一起缩放，而不是单独让背景动。

修复方案 #

把背景和内容拆分为两层，背景层单独应用缩放动画，内容层保持不动：

@Composable
fun PulsatingCircle(content: @Composable () -> Unit) {
    val infiniteTransition = rememberInfiniteTransition()
    val scale by infiniteTransition.animateFloat(
        initialValue = 1f,
        targetValue = 1.1f, // 对应需求的10%缩放
        animationSpec = infiniteRepeatable(
            animation = tween(1700, easing = FastOutSlowInEasing),
            repeatMode = RepeatMode.Reverse
        )
    )

    Box(contentAlignment = Alignment.Center) {
        // 单独的背景层，仅缩放红色圆形
        Box(
            modifier = Modifier
                .size(IntrinsicSize.Max) // 自动适配内容的最大宽高
                .scale(scale) // 仅对背景应用缩放动画
                .background(Color.Red, shape = CircleShape)
        )
        // 内容层，保持原始尺寸和位置不变
        content()
    }
}

修复要点说明 #

• 用两层Box分离背景和内容，确保动画只作用于背景
• IntrinsicSize.Max让背景自动匹配内容的最大尺寸，保证完全覆盖内容
• scale修饰符直接作用在背景Box上，实现背景单独缩放，内容在上方居中不受影响
• 把目标缩放值改为1.1f，刚好对应需求的10%缩放幅度

内容的提问来源于stack exchange，提问作者J. Doe