🎨 animateFloatAsState

数值 · 颜色 · 尺寸 Compose 动画实战

animateFloatAsState 是 Compose 中最常用的基于 float 的过渡动画 API。轻松驱动数值、颜色、尺寸变化，让 UI 生动流畅。本课拆解三种核心用法。

动画类型	目标值	核心参数	典型场景
数值动画	Float	targetValue, animationSpec	进度条、透明度、旋转角度
颜色动画	Color (通过 .toArgb 或 lerp)	配合 animateColorAsState 或手动转换	主题切换、状态指示
尺寸动画	Dp / Float	targetValue 映射到 size / offset	卡片展开、按钮缩放

平滑数值过渡

颜色插值

尺寸动态变化

弹性 & 缓动

📐 核心代码片段

// ===== 1. 数值动画：透明度 / 旋转 =====
var isVisible by remember { mutableStateOf(true) }
val alpha: Float by animateFloatAsState(
    targetValue = if (isVisible) 1f else 0.2f,
    animationSpec = tween(600, easing = FastOutSlowInEasing)
)

// ===== 2. 颜色动画 (通过 animateColorAsState) =====
var isActive by remember { mutableStateOf(false) }
val bgColor: Color by animateColorAsState(
    targetValue = if (isActive) Color(0xFFD8824A) else Color(0xFFF5DDCD),
    animationSpec = spring(dampingRatio = 0.6f)
)

// ===== 3. 尺寸动画 (宽度/高度) =====
var expanded by remember { mutableStateOf(false) }
val widthDp: Float by animateFloatAsState(
    targetValue = if (expanded) 280f else 120f,
    animationSpec = tween(400, easing = LinearEasing)
)
// 使用: Modifier.size(widthDp.dp, 80.dp)

🧩 animateFloatAsState 数据流：状态驱动 → 动画引擎 → 输出浮点值，映射到 UI 属性

✨ 实战要点

数值动画：透明度、旋转、进度条 —— 直接绑定 float 值，配合 tween 或 spring 获得自然手感。
颜色动画：使用 animateColorAsState 更便捷，但也可将颜色拆解为 RGB/A 分量用 animateFloatAsState 分别驱动。
尺寸动画：将 dp 转为 float (例如 200f) 再通过 Modifier.size(value.dp) 实现平滑缩放。
组合技巧：多个 animateFloatAsState 可并行，配合 updateTransition 管理复杂动画。

🌈 颜色动画 · 完整示例

@Composable
fun ColorAnimationBox() {
    var toggled by remember { mutableStateOf(false) }
    val bg by animateColorAsState(
        targetValue = if (toggled) Color(0xFFF5A97F) else Color(0xFFB8D4E3),
        animationSpec = spring(dampingRatio = 0.5f)
    )
    Box(
        modifier = Modifier
            .size(120.dp)
            .background(bg, shape = RoundedCornerShape(24.dp))
            .clickable { toggled = !toggled }
    )
}