Compose动画之高级技巧：动画状态机、动画与协程结合、动画测试

各位同学，今天我们来聊聊 Compose 动画里比较进阶的东西。说实话，前面几章讲的那些基础动画，应付日常开发其实已经够了。但如果你想让动画更可控、更复杂、更健壮，那今天这三个话题——动画状态机、动画与协程结合、动画测试——就是你绕不开的坎。

我个人习惯把动画分为两类：一类是“无脑播放”，比如一个按钮按下去弹一下；另一类是“有状态驱动”，比如一个登录流程，加载中、成功、失败，每个状态切换都伴随不同的动画。后者，才是真正考验功力的地方。

一、动画状态机：让动画“有脑子”

什么叫动画状态机？说白了，就是给动画定义一个有限的状态集合，然后规定状态之间怎么跳转。每个状态可以绑定不同的动画配置。

我在项目中遇到过这样一个场景：一个下载按钮，需要展示“待下载→下载中→暂停→下载完成”四个状态，每个状态切换都有不同的动画效果。如果用传统的 animate*AsState 硬写，条件判断会多到让你怀疑人生。

Compose 里没有现成的“动画状态机”API，但我们可以用 Animatable 配合 LaunchedEffect 自己搭一个。来看代码：

enum class DownloadState {
    IDLE, DOWNLOADING, PAUSED, COMPLETED
}

@Composable
fun DownloadButton() {
    var currentState by remember { mutableStateOf(DownloadState.IDLE) }
    val progress = remember { Animatable(0f) }

    // 状态变化时驱动动画
    LaunchedEffect(currentState) {
        when (currentState) {
            DownloadState.IDLE -> progress.animateTo(0f)
            DownloadState.DOWNLOADING -> progress.animateTo(0.8f, tween(2000))
            DownloadState.PAUSED -> { /* 保持当前值 */ }
            DownloadState.COMPLETED -> progress.animateTo(1f)
        }
    }

    Button(onClick = {
        currentState = when (currentState) {
            DownloadState.IDLE -> DownloadState.DOWNLOADING
            DownloadState.DOWNLOADING -> DownloadState.PAUSED
            DownloadState.PAUSED -> DownloadState.DOWNLOADING
            DownloadState.COMPLETED -> DownloadState.IDLE
        }
    }) {
        Text("${currentState.name} ${(progress.value * 100).toInt()}%")
    }
}

你看，核心思路就是：状态决定动画目标，状态变化触发动画。这样代码结构清晰，每个状态做什么一目了然。

二、动画与协程结合：让动画“听指挥”

Compose 动画底层其实大量依赖协程。Animatable 的 animateTo 就是一个挂起函数。这意味着你可以用协程的各种能力来控制动画流程。

举个例子：我想让一个方块先放大，再旋转，最后淡出。如果用传统方式，你得嵌套回调或者写多个状态。但用协程，直接顺序写就行：

@Composable
fun SequenceAnimation() {
    val scale = remember { Animatable(1f) }
    val rotation = remember { Animatable(0f) }
    val alpha = remember { Animatable(1f) }

    LaunchedEffect(Unit) {
        // 顺序执行三个动画
        scale.animateTo(1.5f, tween(500))
        rotation.animateTo(360f, tween(800))
        alpha.animateTo(0f, tween(300))
    }

    Box(
        modifier = Modifier
            .size(100.dp)
            .graphicsLayer {
                scaleX = scale.value
                scaleY = scale.value
                rotationZ = rotation.value
                alpha = alpha.value
            }
            .background(Color.Blue)
    )
}

嗯，这里要注意：LaunchedEffect 会在 Composable 进入组合时启动协程，离开组合时自动取消。所以不用担心内存泄漏。

更骚的操作是结合 async/await 做并行动画：

LaunchedEffect(Unit) {
    coroutineScope {
        launch { scale.animateTo(1.5f, tween(500)) }
        launch { rotation.animateTo(360f, tween(800)) }
    }
    // 等上面两个都完成，再执行淡出
    alpha.animateTo(0f, tween(300))
}

为什么这样写？因为 coroutineScope 会等待所有子协程完成。说白了，这就是协程的 structured concurrency 在动画领域的应用。

三、动画测试：别让动画成为“黑盒”

说到测试，很多同学会觉得动画很难测。确实，View 系统的动画测试非常痛苦，动不动就要等几秒。但 Compose 的动画测试相对友好很多。

Compose 提供了 TestCoroutineDispatcher 和 runComposeUiTest，可以让你“快进”动画时间。来看一个例子：

@Test
fun testDownloadButtonAnimation() = runComposeUiTest {
    // 设置主线程调度器为测试调度器
    val testDispatcher = StandardTestDispatcher()
    Dispatchers.setMain(testDispatcher)

    setContent {
        DownloadButton()
    }

    // 点击按钮，触发状态切换
    onNodeWithText("IDLE 0%").performClick()
    
    // 快进动画时间
    testDispatcher.advanceTimeBy(1000)
    
    // 验证动画是否执行到中间状态
    onNodeWithText("DOWNLOADING 40%").assertExists()
    
    // 再快进到结束
    testDispatcher.advanceTimeBy(1000)
    onNodeWithText("DOWNLOADING 80%").assertExists()
}

我曾经踩过一个坑：测试里忘记设置 Dispatchers.setMain，结果动画一直不执行，排查了半天。后来发现 Compose 动画默认跑在 Main 线程，测试环境需要手动指定调度器。

对于更复杂的动画状态机测试，我建议把状态机逻辑和 UI 分离。比如把状态转换逻辑写成纯函数，单独测试。UI 层只测试状态变化后是否正确渲染。这样测试更稳定，也更容易定位问题。

知识体系总览

下面这张图概括了本章的核心内容，你可以把它当作一个思维导图来用：

这三个技巧，说白了就是让你从“会用动画”进阶到“能驾驭动画”。动画状态机解决复杂状态切换，协程解决动画编排，测试解决质量保障。三者缺一不可。

我个人觉得，Compose 动画最大的优势就是和 Kotlin 协程的无缝集成。这在 View 系统里是做不到的——你想想看，以前写动画序列，要么用 AnimatorSet，要么写一堆监听器，代码又臭又长。现在用协程，就像写同步代码一样自然。

好了，这一章的内容就到这里。记住：动画不只是“动起来”，更是“有逻辑地动起来”。

---

公众号:蓝海资料掘金营，微信deep3321