当前位置：首页 > article >正文

【开源宝藏】用 JavaScript 手写一个丝滑的打字机动画效果

article 2025/3/31 21:36:23

你当前项目实现了一个非常丝滑的 打字机文字效果动画，使用的是自定义的 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()`	执行每一步并添加速度差