打字机效果是怎么实现的

打字机效果看起来简单，本质上是“文本状态机 + 定时驱动 + 光标视觉反馈”的组合。

1. 核心目标拆解

一个完整的打字机组件通常要解决三件事：

1. 字符逐步出现：从完整文案里按顺序截取；
2. 光标闪烁：模拟输入焦点；
3. 节奏控制：支持打字、停顿、删除、循环。

2. 最小可用实现原理

最小方案只需要两个状态：

• index：当前显示到第几个字符；
• displayText：当前要渲染的字符串（fullText.slice(0, index)）。

每次定时器触发就让 index + 1，直到达到全文长度。
这样就能得到“逐字出现”的视觉结果。

3. 为什么光标很关键

没有光标时，用户会觉得只是文本渐显。
有光标闪烁时，用户才会感知到“输入中”的拟物反馈。

常见做法：

• 在文本后追加 | 或 ▍；
• 用 CSS opacity 动画做闪烁；
• 让光标和字符推进解耦，避免帧率抖动时一起卡顿。

4. 进阶：删除与循环

很多站点会做“打字 -> 停顿 -> 删除 -> 下一个短句”的轮播感。
本质是把状态机扩成 4 个阶段：

• typing（输入中）
• pause（停顿）
• deleting（删除中）
• switch（切换下一条）

阶段之间切换时，速度通常不同：
输入速度略慢，删除速度略快，停顿给用户阅读窗口。

5. 性能和可用性注意点

5.1 避免频繁重排

如果每个字符都是独立节点，DOM 更新频率会更高。
多数场景下直接更新一段文本内容更轻。

5.2 优先考虑 reduced-motion

对系统设置了“减少动态效果”的用户，建议：

• 直接展示完整文案；
• 或只保留一次淡入，不做循环打字。

5.3 组件销毁时清理计时器

无论是 setInterval 还是 setTimeout 链，都要在卸载时清理，避免内存泄漏和后台无意义执行。

6. 实战经验总结

打字机效果不是越快越炫，关键是“可读”：

• 首句尽量短；
• 字符节奏保持稳定；
• 不要和太多并行动画抢注意力。

最终目标不是展示动画本身，而是让用户更自然地读到你想表达的内容。