你当前项目实现了一个非常丝滑的 打字机文字效果动画，使用的是自定义的 typical.js 脚本。下面我将给出一份逐步拆解的中文教程，帮你或其他初学者快速上手并自定义这个打字效果。
✨ 最终效果
打开页面后，中央会逐字显示：
Hello
Hello world!
Welcome to the typing effect demo.
其中，文字是一个一个打出来的，中间有停顿和替换的动画效果，模拟打字体验。
🧱 第 0 步：项目结构
你的项目由以下文件构成：
typing-effect/
├── index.html // 页面主结构，绑定 JS 调用
├── typical.js // 实现核心打字动画的逻辑
🔤 第 1 步：HTML 结构解析（index.html）
<body>
<div id="output"></div>
<!-- 引入打字效果脚本 -->
<script src="./typical.js"></script>
<script>
document.addEventListener('DOMContentLoaded', () => {
const node = document.getElementById('output');
type(node,
'Hello ',
1000,
'Hello world!',
1000,
' Welcome to the typing effect demo.'
);
});
</script>
</body>
✅ 关键点说明
- 页面只有一个空的
<div id="output">，用于动态输出文字。 type()函数接收多个参数：- 字符串：逐字显示出来；
- 数字：表示等待多少毫秒；
- 你也可以传入函数，实现更复杂逻辑。
⚙️ 第 2 步：typical.js 核心逻辑分析
2.1 主要入口函数：type(node, ...args)
async function type(node, ...args) {
for (const arg of args) {
switch (typeof arg) {
case 'string':
await edit(node, arg); // 文字变化动画
break;
case 'number':
await wait(arg); // 延迟等待
break;
case 'function':
await arg(node, ...args); // 自定义行为
break;
default:
await arg;
}
}
}
2.2 edit()：逐字比较和更新
async function edit(node, text) {
const overlap = getOverlap(node.textContent, text);
await perform(node, [...deleter(node.textContent, overlap), ...writer(text, overlap)]);
}
- getOverlap：找到当前文本和目标文本的共同部分，避免重复删除。
- deleter：从当前文本删到重合部分。
- writer：从重合部分写到完整文本。
- 组合起来就是 “智能替换”。
2.3 perform()：每次逐步更新 textContent
async function perform(node, edits, speed = 60) {
for (const op of editor(edits)) {
op(node); // 每次修改文本
await wait(speed + speed * (Math.random() - 0.5)); // 模拟人类打字速度波动
}
}
🧪 第 3 步：可定制用法示例
你可以把这段改成你自己的文字，比如：
type(node,
'你好，世界！',
800,
'欢迎来到 Typing.js 的演示。',
1500,
'😎 你可以无限扩展内容~',
1000,
'再见～'
);
或者在多个元素中交替：
const title = document.getElementById('title');
const desc = document.getElementById('desc');
type(title, '🚀 Typing Animation');
type(desc, 1000, 'This is an elegant way to present words one by one.');
🎁 拓展玩法建议
打字音效
- 每次字符变化时播放「键盘敲击」音效。
循环播放
- 在
type()外部加入循环函数，形成无限播放文字动画。
- 在
配合 CSS 闪烁光标
- 添加
<span class="cursor">|</span>伪元素配合动画：
.cursor { display: inline-block; width: 1px; background: white; animation: blink 1s infinite; } @keyframes blink { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } }- 添加
✅ 总结
| 模块 | 作用 |
|---|---|
type() |
接收多个动画步骤（字符串 / 等待 / 函数） |
edit() |
根据目标文字智能删除 & 添加 |
writer() |
模拟打字效果 |
deleter() |
模拟删除效果 |
perform() |
执行每一步并添加速度差 |
这个项目结构简洁、逻辑清晰，是一个很适合自定义与学习 JS 动画的案例。