Compose 动画规格详解：Spring、Tween 与 Keyframes

代码示例

val blue = remember { mutableStateOf(true) }
val color by animateColorAsState(
    if (blue.value) Color.Blue else Color.Red,
    animationSpec = spring(
        dampingRatio = Spring.DampingRatioNoBouncy,
        stiffness = Spring.StiffnessMedium
    )
)
Column(
    modifier = Modifier.fillMaxWidth(),
    horizontalAlignment = Alignment.CenterHorizontally,
) {
    Button(onClick = { blue.value = !blue.value }) {
        Text("切换颜色")
    }
    Box(modifier = Modifier.size(100.dp).background(color))
}

调整刚度和阻尼比可以显著改变动画手感。低刚度配合高阻尼比会产生明显的回弹效果。

2. Tween 线性过渡动画

tween 用于创建具有固定持续时间、延迟和缓动曲线的动画。它不模拟物理特性，而是基于时间插值。

核心参数

fun <T> tween(
    durationMillis: Int = DefaultDurationMillis,
    delayMillis: Int = 0,
    easing: Easing = FastOutSlowInEasing
): TweenSpec<T>

• durationMillis：动画总时长，默认 300ms。
• delayMillis：启动前的延迟时间。
• easing：缓动曲线，决定速度变化模式。

Easing 缓动曲线

Easing 接口定义了一个 transform 方法，输入 0 到 1 之间的分数，输出对应的进度值。

fun interface Easing {
    fun transform(fraction: Float): Float
}

官方提供四种标准实现：

1. FastOutSlowInEasing：快速开始，缓慢结束。最自然的过渡效果。
2. LinearOutSlowInEasing：匀速开始，减速结束。适合进入屏幕的元素。
3. FastOutLinearInEasing：加速开始，匀速结束。适合退出屏幕的元素。
4. LinearEasing：全程匀速。适用于需要精确时间控制的场景。

代码示例

animationSpec = tween(
    durationMillis = 2000,
    easing = LinearEasing
)

通过组合不同的 Easing 和 duration，可以实现丰富的动态效果。

3. Snap 瞬态切换

snap 用于立即将值切换到目标值，中间没有过渡过程。常用于需要即时反馈的场景。

fun <T> snap(delayMillis: Int = 0) = SnapSpec<T>(delayMillis)

它继承自 DurationBasedAnimationSpec，支持延迟设置，但动画本身是瞬间完成的。

4. Keyframes 关键帧动画

keyframes 允许在动画持续时间内定义多个时间点的具体值，实现复杂的路径动画。

fun <T> keyframes(
    init: KeyframesSpec.KeyframesSpecConfig<T>.() -> Unit
): KeyframesSpec<T>

使用 Kotlin 的中缀函数 at 和 with 可以优雅地定义关键帧。

animationSpec = keyframes {
    durationMillis = 375
    50.dp at 0 with LinearOutSlowInEasing
    52.dp at 35 with FastOutLinearInEasing
    55.dp at 75
    100.dp at 225
}

每个关键帧都可以指定独立的缓动曲线，从而实现非线性的运动轨迹。

5. Repeatable 重复动画

repeatable 用于构建有限次数的重复动画。

fun <T> repeatable(
    iterations: Int,
    animation: DurationBasedAnimationSpec<T>,
    repeatMode: RepeatMode = RepeatMode.Restart,
    initialStartOffset: StartOffset = StartOffset(0)
): RepeatableSpec<T>

• iterations：重复次数。
• repeatMode：Restart（从头开始）或 Reverse（反向播放）。
• initialStartOffset：起始偏移量，支持 Delay 或 FastForward。

6. InfiniteRepeatable 无限重复

与 repeatable 类似，但不限制重复次数，常用于加载指示器或背景循环效果。

fun <T> infiniteRepeatable(
    animation: DurationBasedAnimationSpec<T>,
    repeatMode: RepeatMode = RepeatMode.Restart,
    initialStartOffset: StartOffset = StartOffset(0)
): InfiniteRepeatableSpec<T>

动画规格对比与选择指南

最佳实践与性能优化

1. 避免过度动画：过多的动画会消耗 GPU 资源，影响性能。仅在必要时启用。
2. 使用 remember：确保动画状态在重组时保持，避免不必要的重新计算。
3. 选择合适的 Spec：对于简单的状态切换，优先使用 spring；对于精确的时间控制，使用 tween。
4. 注意内存泄漏：在 DisposableEffect 中清理长时间运行的动画任务。

总结

Jetpack Compose 提供了丰富的动画规格以满足不同需求。理解 spring 的物理特性、tween 的缓动机制以及 keyframes 的关键帧控制，能够帮助开发者构建出既流畅又符合直觉的用户界面。在实际开发中，应根据业务场景灵活组合这些规格，以达到最佳的视觉效果和用户体验。