更新日志

typewriter.js - 打字机效果 JavaScript 库

typewriter.js 是一个用于在网页上创建打字机效果的轻量级 JavaScript 库。它可以模拟文本的逐字打印和删除效果，适用于网站的标题、介绍或任何需要动态文本效果的地方。但在较新的版本中，用于初始化对象的文本中的 String 将被转换为一个数组中，以避免 U+10000 和 U+10FFFF 之间的字符由于 UTF-16 编码而被分成两个字符。

使用

<script src="https://cdn.jsdelivr.net/gh/martinSCS/typewriter/typewriter.js"></script>

特点

• 自定义速度：可以自定义打字速度和删除速度。
• 暂停时间：可以分别设置打字和删除后的暂停时间。
• 循环播放：支持文本的循环播放。
• 路由字典和路由映射：支持通过路由字典和路由映射来实现复杂的打字效果。

使用方法

1. 在HTML文件中引入 typewriter.js 库：

   <script src="path/to/typewriter.js"></script>

2. 创建一个用于显示打字效果的元素：

   <div id="typewriter"></div>

3. 初始化 Typewriter 对象并开始打字效果：

   const typewriter = new Typewriter(document.getElementById('typewriter'), ['Hello, World!', 'Welcome to my website!']);

配置参数

Typewriter 构造函数接受以下参数：

• element: 要显示文本的DOM元素。
• texts: 要打印的文本数组。
• typingSpeed (可选): 打字速度（毫秒/字符），默认为100。
• deletingSpeed (可选): 删除速度（毫秒/字符），默认为50。
• typingPauseTime (可选): 打字后的暂停时间（毫秒），默认为2000。
• deletingPauseTime (可选): 删除后的暂停时间（毫秒），默认为0。
• loop (可选)：循环，用于指定打字机是否只完成一周期的打印，默认为 true，即循环。
• routeDict (可选): 路由字典，用于定义特殊字符的打字路径。
• routeMap (可选): 路由映射，用于指定文本中特定位置字符的路由路径。
• additionalFunc (可选): 可选函数，用于对每一步打字或删除操作产生出来的文字进行处理，默认为 null。

示例

const typewriter = new Typewriter(
    document.getElementById('typewriter'),       // element
    ['Hello, World!', 'Welcome to my website!'], // texts
    100,                                         // typingSpeed
    50,                                          // deletingSpeed
    2000,                                        // typingPauseTime
    500,                                         // deletingPauseTime
    true,                                        // loop
    {},                                          // routeDict
    {}                                           // routeMap
);

以上代码会在 #typewriter 元素中创建一个打字机效果，依次打印“Hello, World!”和“Welcome to my website!”，每个字符的打字速度为1字每100毫秒，删除速度为1字每50毫秒，打字后暂停2秒（2,000毫秒），删除后暂停0.5秒（500毫秒），循环打印。

routeDict 和 routeMap 的使用方法

routeDict 的使用方法

routeDict 是 Typewriter 类中用于定义特殊字符的打字路径的一个对象。当你需要在打字效果中包含特定的字符组合或者在特定的字符上应用特殊的打字效果时，可以使用 routeDict 来实现。routeDict 也可以设置打字机效果模拟东亚文字的键入过程。

以“状”（中文）、“唇”（日文）、“한”（朝鲜文）为例，我们可以通过定义 routeDict 来控制这些字符的打字路径，使得它们以特定的方式逐步出现。下面是一个简单的示例：

texts = [
    '状',
    '唇',
    '한'
]

routeDict = {
    '状': [['z', 'zh', 'zhu', 'zhua', 'zhuan', 'zhuang', '状']],
    '唇': [['く', 'くち', 'くちび', 'くちびる', '唇']],
    '한': [['ㅎ', '하', '한']]
};

const typewriter = new Typewriter(document.querySelector('#typewriter'), texts, routeDict);

这样，我们就可以得到这样的效果

routeMap 的使用方法

routeMap 是Typewriter类中用于指定文本中特定位置字符的路由路径的一个对象。它允许你对同一个字符在不同位置有不同的打字路径，这在处理多种语言或特殊打字效果时非常有用。

对于中文和日文，同一个字在不同情况下可能会有不同的键入方式。譬如，中文的“长”在不同的情况下会有“chang”和“zhang”两种键入方式；日文的“高”在不同的情况下也有“こう”（高校）和“たか”（高い）两种键入方式。

如果两种键入方式会在同一个打字机效果中出现，那么我们就可以设定 routeMap ，来实现不同情况下文字的键入方式。

比如以下例句：

• 高 (たか) 木 (ぎ) さんはこの 高 (こう) 校 (こう) の 生 (せい) 徒 (と) です。
• 头发 长 (zhǎng) 得越来越 长 (cháng) 了。

我们可以将 routeDict 和 routeMap 设定为如下状态：

let texts = [
    '高木さんはこの高校の生徒です。',
    '头发长得越来越长了。'
];
            
let routeDict = {
    '长': [
        ['c', 'ch', 'cha', 'chan', 'chang', '长'],
        ['z', 'zh', 'zha', 'zhan', 'zhang', '长']
    ], 
    '高': [
        ['こ','こう','高'],
        ['た','たか','高']
    ]
};
            
let routeMap = {
    '0,0': 1,
    '7,0': 0, 
    '2,1': 1, 
    '7,1': 0
}
            
const typewriter = new Typewriter(
    document.querySelector('#typewriter'), // elements
    texts,                                 // texts
    100, 50, 2000, 0,                      // typingSpeed, deletingSpeed, typingPauseTime, deletingPauseTime
    routeDict,                             // routeDict
    routeMap                               // routeMap
);

这样，我们就可以得到同一个字在不同情况下以不同键入方式出现的效果

routeMap 的键由两部分组成，并且以单个半角逗号“,”分割。逗号两侧的数字确定了所需要特殊处理的字的坐标。逗号左侧的数字是该字在句子中的位置（以下标 0 为起始计算），逗号右侧是句子在 texts 中的位置（以下标 0 为起始计算）。比如，键 "3,1" 表示对 texts[1] 的第3+1个字（即 texts[1].charAt(3)）进行特殊处理。routeMap 的值为一个整形，对应的是 routeDict 中值部分的下标。比如 '7,1': 0 指的是“第 2（1+1）句话的第 8（7+1）个字的组成方式取 route 数组中第 1（0+1）个”。

texts 的扩展使用方法

texts 是一个存储了打字机需要循环打印的句子的数组。texts 中的元素通常为字符串。但是也可以为数组。但是，在新版本中，用于初始化的 texts 中的字符串，将会被转换为数组，以规避编码在 U+10000 到 U+10FFFF 之间的字符会由于 UTF-16 编码被拆分为两个字的问题。

texts 的一个元素为数组时，意味着该子数组中的各个元素将以整体在 routeDict 中寻找 route。比如对于

texts = [
  [['章魚','を','食','べ','る']],
  [['海老','を','買','う']]
]

若不设定 routeDict，那么“ 章 (た) 魚 (こ) ”和“ 海 (え) 老 (び) ”将会以整体的形式一齐出现，而不是两字分开出现。

若设定 routeDict 如下：

routeDict = {
  '章魚': ['た', 'たこ', '章魚'],
  '海老': ['え', 'えび', '海老']
}

则会以“た→たこ→章魚”和“え→えび→海老”的顺序打出来。

addtionalFunc 的使用方法

addtionalFunc 是一个函数。其参数其中一个必须是字符串，返回值必须是一个字符串。其默认值是 null，在这种情况下文本将会原封不动地返回回来。

addtionalFunc 可用于实现 routeDict、routeMap 和 texts 达不到的效果。打字机效果每一步都会产生一个新的字符串，然后用这个字符串替换 element 元素中的文本内容。但是用户可能需要以固定的逻辑修改这个字符串，再进行替换。

例如，你希望打乱字符串的顺序，直至字符串被打完。那么你可以这么写：

function scrambleString(str, shouldNotScramble) {
    // 如果布尔值为真，直接返回原字符串
    if (shouldNotScramble) {
        return str;
    }
            
    // 将字符串转换为数组以便打乱
    let array = str.split('');
    // 通过 Fisher-Yates 算法打乱数组
    for (let i = array.length - 1; i > 0; i--) {
        const j = Math.floor(Math.random() * (i + 1));
        [array[i], array[j]] = [array[j], array[i]]; // 交换元素
    }
    // 将打乱后的数组重新组合成字符串并返回
    return array.join('');
}
let texts = [
    'hello, world'
];
            
const typewriter = new Typewriter(
    document.querySelector('#typewriter'), 
    texts, 
    100, 50, 2000, 0, {}, {}, function (text) {return scrambleString(text, text === typewriter.texts[typewriter.textIndex].join('') || typewriter.isDeleting === true);} //第二个参数在文本打完或正在删除时为真
);