如何在Jetpack Compose中实现数字变化时的缩放弹出动画

核心思路 #

监听StateFlow中数字的变化，触发一段单次缩放动画序列：从初始大小(1f)放大到1.3f，再回弹回1f，总时长200ms。通过mutableStateOf维护缩放状态，配合LaunchedEffect在数字更新时执行动画逻辑。

完整代码实现 #

1. ViewModel中的StateFlow（假设已有）

class CounterViewModel : ViewModel() {
    private val _myState = MutableStateFlow(CounterState(number = "0"))
    val myState = _myState.asStateFlow()

    fun incrementNumber() {
        _myState.update { current ->
            current.copy(number = (current.number.toInt() + 1).toString())
        }
    }

    data class CounterState(val number: String)
}

2. Compose UI实现

@Composable
fun CounterScreen(viewModel: CounterViewModel = viewModel()) {
    val myState by viewModel.myState.collectAsStateWithLifecycle()
    // 维护缩放比例的状态
    val scale by remember { mutableStateOf(1f) }

    Box(
        modifier = Modifier.fillMaxWidth(),
        contentAlignment = Alignment.Center
    ) {
        Text(
            text = myState.number,
            modifier = Modifier
                .scale(scale) // 应用缩放效果
                .clickable { viewModel.incrementNumber() }, // 测试用：点击触发数字变化
            fontSize = 24.sp
        )
    }

    // 监听数字变化，触发动画序列
    LaunchedEffect(myState.number) {
        // 第一步：100ms内放大到1.3f
        animate(
            initialValue = 1f,
            targetValue = 1.3f,
            animationSpec = tween(durationMillis = 100)
        ) { value, _ ->
            scale = value
        }
        // 第二步：100ms内缩小回1f
        animate(
            initialValue = 1.3f,
            targetValue = 1f,
            animationSpec = tween(durationMillis = 100)
        ) { value, _ ->
            scale = value
        }
    }
}

关键细节说明 #

• 触发逻辑：LaunchedEffect(myState.number)会在数字每次更新时重新启动协程，确保动画仅在数字变化时执行一次，不会循环。
• 缩放原点：Compose的scale modifier默认以元素中心为缩放原点，和你之前XML中pivotX="50%"、pivotY="50%"的效果完全一致，无需额外配置。
• 替代方案：使用animateFloatAsState
  如果偏好状态驱动的动画API，也可以通过切换目标值实现相同效果：

@Composable
fun CounterScreenAlternative(viewModel: CounterViewModel = viewModel()) {
    val myState by viewModel.myState.collectAsStateWithLifecycle()
    val animateScaleTarget by remember { mutableStateOf(1f) }
    val scale by animateFloatAsState(
        targetValue = animateScaleTarget,
        animationSpec = tween(durationMillis = 100)
    )

    Box(
        modifier = Modifier.fillMaxWidth(),
        contentAlignment = Alignment.Center
    ) {
        Text(
            text = myState.number,
            modifier = Modifier
                .scale(scale)
                .clickable { viewModel.incrementNumber() },
            fontSize = 24.sp
        )
    }

    LaunchedEffect(myState.number) {
        animateScaleTarget = 1.3f
        delay(100)
        animateScaleTarget = 1f
    }
}

为什么之前的尝试可能失败 #

• animate*AsState：仅直接绑定数字作为动画目标时，无法形成"放大再缩小"的序列，因为它是单一状态驱动的过渡，无法拆分多阶段动画。
• AnimatedContent：默认用于内容切换时的过渡动画（比如新旧Text的替换），而你需要的是同一个Text的缩放效果，用状态驱动的动画逻辑更匹配需求。

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