Jetpack Compose 动画rememberInfiniteTransition

在 Jetpack Compose 中，rememberInfiniteTransition 是一个专为无限循环动画（如加载转圈、呼吸灯、骨架屏闪烁、脉冲光效等）设计的 API。

与前面提到的那些需要外部状态触发（如点击按钮、改变布尔值）的动画不同，rememberInfiniteTransition 会在组件进入组合（Composition）时自动开始播放，并按照配置无限循环下去。

一、核心作用与特点

自动循环播放（无需状态触发）
它不需要你定义 var isAnimating by remember { mutableStateOf(false) } 去手动触发。只要组件显示，它就开始转动或变化。
多属性协同循环
和 updateTransition 类似，它是一个"容器"，你可以在其中创建多个子动画（如 animateFloat、animateColor、animateValue），让尺寸、颜色、透明度等多个属性同时以无限循环的方式变化。
丰富的重复模式（RepeatMode）
通过 infiniteRepeatable，你可以轻松控制动画的循环行为：

RepeatMode.Restart：动画播完后瞬间重置回起点，重新开始（适合旋转动画、进度条）。
RepeatMode.Reverse：动画播完后反向播放回到起点（适合呼吸灯、心跳缩放）。

二、典型使用示例

以下代码展示了如何使用 rememberInfiniteTransition 实现一个带有缩放呼吸效果和颜色渐变的脉冲加载卡片：

复制代码

@Composable
fun PulsingLoadingBox() {
    // 1. 创建无限过渡容器
    val infiniteTransition = rememberInfiniteTransition(label = "InfiniteTransition")

    // 2. 创建大小/缩放的循环子动画
    val scale by infiniteTransition.animateFloat(
        initialValue = 0.9f,
        targetValue = 1.1f,
        animationSpec = infiniteRepeatable(
            animation = tween(durationMillis = 800, easing = FastOutSlowInEasing),
            repeatMode = RepeatMode.Reverse // 往返反转（变大然后变小）
        ),
        label = "ScaleAnimation"
    )

    // 3. 创建背景颜色的循环子动画
    val color by infiniteTransition.animateColor(
        initialValue = Color.Blue,
        targetValue = Color.Magenta,
        animationSpec = infiniteRepeatable(
            animation = tween(durationMillis = 1000),
            repeatMode = RepeatMode.Reverse
        ),
        label = "ColorAnimation"
    )

    // 4. 应用到 UI 组件
    Box(
        modifier = Modifier
            .size(100.dp)
            .scale(scale) // 应用缩放
            .background(color, shape = RoundedCornerShape(12.dp)),
        contentAlignment = Alignment.Center
    ) {
        Text(text = "Loading", color = Color.White)
    }
}