这事儿得从上周二中午那顿麻辣烫说起。我正吸溜着粉，旁边坐过来的同事突然把手机往我这边一凑，眼神里透着那种刚发现新大陆的兴奋劲儿。他说那Ru果我想假装我是大模型接口呢？

我当时愣了一下嘴里的宽粉差点没咬断。假装大模型？这哥们儿脑洞总是这么清奇。不过仔细一想，他指的应该是现在市面上那些AI应用里常见的“流式输出”效果——也就是文字不是一下子全蹦出来而是像有人在屏幕对面噼里啪啦敲键盘一样，一个字一个字地往外吐。

这种效果，咱们行内人管它叫“打字机特效”。以前那玩法可就太多了。今天咱们就来聊聊，怎么用Zui少的代码，在五分钟内搞定这个Compose打字机特效，顺便让你的Android应用kan起来瞬间高大上，充满“AI感”。

为什么我们需要这种“伪”AI体验？

说实话，这不仅仅是为了好kan。虽然同事的初衷是“假装大模型”，但在实际的产品设计中，这种逐字显示的动画有着极其重要的心理学作用。

你想啊，Ru果一大段文字瞬间“唰”地一下全部显示在屏幕上，用户的第一反应往往是懵的，甚至会产生一种压迫感。而Ru果是逐字显现，这就给了用户一个阅读的“引导”，视线自然而然地跟着光标走。geng重要的是这种动态过程Neng极大地缓解等待焦虑，让用户觉得系统正在“实时思考”和“生成”内容，哪怕这其实只是一段写死的静态文本。

所以不管你是不是真的接了GPT的接口，这个特效，值得你拥有。

核心思路：状态与协程的共舞

在Compose的世界里万物皆状态。要实现打字机效果，我们的核心逻辑其实非常简单：维护一个“当前显示的文本”状态，然后利用协程，每隔一小段时间往这个状态里塞一个字。

听起来是不是挺简单？但这里面有几个坑，咱们得一步步趟过去。

第一步：搞定状态容器

咱们得有个地方存那些Yi经“打”出来的字。在Compose里这活儿非 `remember` 和 `mutableStateOf` 莫属。

我们需要创建一个可变的字符串变量，用来存储当前屏幕上应该显示的内容。为什么要用 `remember`？因为Compose的重组机制非常频繁，Ru果不“记住”这个变量，每次重组它dou被重置为空字符串，那你永远也kan不到完整的字。

代码大概长这样：

var textToDisplay by remember { mutableStateOf }

这一行代码，就是咱们打字机特效的“内存”。它就像一个黑板，我们负责往上写，Compose负责盯着黑板kan，一旦发现黑板上的字变了它立马就通知UI去刷新。

第二步：让时间流动起来

有了黑板，还得有个写字的人。在Compose里这个“写字的人”就是协程。我们需要一个Neng在Composable生命周期内启动的协程，而且Zui好Neng感知到依赖项的变化。

这时候，`LaunchedEffect` 就该登场了。这玩意儿是Compose侧边效应的三剑客之一，它的核心作用就是在组合进入Composition时或者在key参数发生变化时启动一个协程作用域。

我们把目标文本作为key传进去。这样，一旦目标文本变了动画就会自动重启，重新开始打字。

第三步：逐字追加的逻辑

接下来就是Zui核心的循环逻辑了。在 `LaunchedEffect` 的内部，我们开启一个循环，遍历目标文本的每一个字符。

这里有个小细节，咱们得把字符串转成字符数组 `toCharArray`，然后一个一个拿出来。每拿出来一个字符，就把它拼接到咱们的 `textToDisplay` 后面。拼完之后千万别急着下一个，得“睡”一会儿。这个“睡”，就是 `delay` 函数。

这个 `delay` 的时间长短，直接决定了打字的速度。太快了像机关枪，用户kan不过来；太慢了像老牛拉破车，用户会急死。一般来说30毫秒到100毫秒之间是个比较舒适的区间。

逻辑代码如下：

LaunchedEffect {
    for ) {
        textToDisplay += char.toString
        delay // 控制每个字符的显示间隔
    }
}

进阶优化：拒绝机械感，拥抱随机性

写到这儿，同事凑过来kan了一眼，摇摇头说：“不对，这感觉不对。”

我问他哪不对。他说：“你kan那些真正的AI接口，比如ChatGPT，它吐字的速度不是匀速的。有时候快，有时候慢，有时候还会卡顿一下。你这个匀速的，一kan就是假的。”

嘿，你还别说这观察力绝了。确实大模型的SSE接口返回数据，受网络传输、Token生成速度等各种因素影响，绝对不是匀速的。Ru果咱们用固定的 `delay`，那种机械的节奏感瞬间就会暴露“这是个假动画”的事实。

那怎么办？加料！

我们Ke以把固定的 `delay` 时间，改成在一个时间范围内随机取值。比如每次延迟在 10毫秒 到 400毫秒 之间随机。这样一来打字的速度就会忽快忽慢，产生一种独特的“呼吸感”，kan起来就非常像是在等待网络传输或者模型生成的真实效果了。

优化后的代码逻辑，咱们把参数类型从 `Long` 改成 `LongRange`：

@Composable
fun TextTypeWriter(
    modifier: Modifier = Modifier,
    text: String,
    delayRange: LongRange = 10L..400L, // 默认的随机延迟区间
    onDone:  -> Unit = {},
) {
    var textToDisplay by remember { mutableStateOf }
    LaunchedEffect {
        for ) {
            textToDisplay += char.toString
            delay) // 每次dou在区间内随机选一个值
        }
        onDone.invoke // 打完了回调一声
    }
    Text(
        modifier = modifier,
        text = textToDisplay,
    )
}

你kan，就这么一个小小的改动，那种“机器味儿”瞬间就少了一大半，取而代之的是一种难以言喻的“智Neng感”。

完整封装与使用

为了方便以后复用，咱们把上面的逻辑封装成一个完整的 Composable 函数。

这个函数咱们命名为 `TextTypeWriter`。除了核心的 `text` 参数，咱们还Ke以暴露几个常用的配置项：

modifier这个是标配，让调用者Ke以控制位置、大小等。

delayRange刚才说的随机延迟区间，默认给个比较自然的值。

onDone这是一个回调函数。当所有字dou打完了咱们通知外面一声。比如打完字后显示一个“发送”按钮，或者播放一个提示音，dou得靠这个回调。

整合一下Zui终的完整代码就像下面这样。你Ke以直接复制到你的项目里稍微改改包名就Neng跑。

@Composable
fun TextTypeWriter(
    modifier: Modifier = Modifier,
    text: String,
    delayRange: LongRange = 30L..100L,
    onDone:  -> Unit = {},
) {
    // 1. 状态管理：记住当前显示的文本
    var textToDisplay by remember { mutableStateOf }
    // 2. 动画触发：利用LaunchedEffect处理生命周期
    LaunchedEffect {
        // 每次text变化，先清空当前显示
        // Ru果不想清空，Ke以加个判断逻辑
        for ) {
            textToDisplay += char.toString
            // 3. 随机延迟，模拟真实感
            delay)
        }
        // 4. 结束回调
        onDone.invoke
    }
    // 5. UI展示
    Text(
        modifier = modifier,
        text = textToDisplay,
        // 这里还Ke以加个光标效果，比如 textToDisplay + "▍"
    )
}

实战演练：把它放到屏幕上

封装好了怎么用呢？超级简单。在你的 `Column` 或者 `Box` 布局里直接调用这个函数就完事了。

比如咱们想在屏幕正中间显示一句“I Love Android Development”，并且打完字后在Logcat里打印一句日志：

// 示例：在屏幕中央显示打字机动画文本
Box(
    modifier = Modifier.fillMaxSize,
    contentAlignment = Alignment.Center,
) {
    TextTypeWriter(
        text = "I Love Android Development", 
        onDone = {
            Log.d
        }
    )
}

运行一下你会kan到文字在屏幕上欢快地跳动着出现，那种节奏感，绝对比死板的静态文本要生动得多。

一点碎碎念：关于视频剪辑的误区

说到打字机效果，其实不光是开发圈，剪辑圈的朋友们也特别热衷。我之前刷视频，kan到好多教程教怎么在Pr里Zuo这个效果。

什么“零基础学Pr:一分钟学会打字机效果”，或者“Pr一分钟教你实现”。他们的Zuo法通常是给文字源文本打关键帧，一帧一帧地往后挪，或者用遮罩擦除。虽然也NengZuo出来但那可是纯手工活儿啊！要是文字长了或者要改内容，那简直是灾难，得重新对帧。

咱们Zuo开发的就不一样了。咱们是用代码生成动画，文字哪怕是一万字，也就是个循环的事儿；想改内容？改个字符串参数就行。这就是程序员的降维打击，哈哈。

通过本文的折腾，你应该Yi经掌握了 Jetpack Compose 中打字机动画的核心实现逻辑。这不仅仅是一个简单的动画技巧，geng是对 Compose 状态管理和协程机制的一次绝佳实践。

咱们回顾一下重点：

用 remember 和 mutableStateOf 保存当前显示的文本状态。

用 LaunchedEffect 监听目标文本的变化并启动协程。

在协程中循环遍历字符，配合 delay 实现逐字追加。

使用随机延迟区间 LongRange.random 模拟真实的AI流式输出效果。

这个方案代码简洁、复用性强，而且通过参数Ke以灵活调整动画的快慢和节奏，完全Neng满足不同场景的需求。下次产品经理再提这种“kan起来hen酷”的需求，你就Ke以自信地拍着胸脯说：“给我五分钟，搞定！”

嗯，就这样！下次吃饭的时候，我打算给同事展示一下这个带随机延迟的版本，kankan他还挑不挑刺儿。咱们代码见！

---