鲁达 使用 JavaScript 创建打字机动画的教程
在这篇博客中，我们将介绍如何使用 JavaScript 创建打字机动画。 您将在下面找到我们将要创建的动画。
在开始之前，我们必须创建一个 index.html 文件。 我还创建了一个包含一些基本样式的 文件。 您可以在下面找到 index.html 和 的代码。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="./" rel="stylesheet"/> <title>Creating Typewriter Effect</title> </head> <body> <div class="basic-styling"> hello </div> <script type="text/javascript" src=".;></script> <script type="text/javascript" src=".;></script> </body> </html>.basic-styling{ height: 100vh; width: 100vw; display: flex; justify-content: center; align-items: center; }现在，我们可以开始编写打字机动画的代码了。我们将首先创建两个文件： 和 index.js。 index.js 将负责初始化打字机对象并在 DOM 上显示动画。 文件将包含与打字机动画相关的所有逻辑，并将成为本博客的主要关注点。考虑到这一点，我们可以开始编写打字机的逻辑。
我将把下一节分解成许多部分，详细介绍每个步骤。如果您想查看完整代码，请滚动到本节末尾。
我们从类属性和构造函数开始。可以看出，此类具有许多属性。它有一个状态对象，它包含有关当前在 DOM 上显示的状态的重要信息。它有一个选项对象，其中包含有关应该显示什么以及如何显示的信息。最后，它有一个 nextStep 属性，它是指向其他类函数的指针。下面我将介绍每个属性并描述它们所代表的内容。
注意：选项是唯一可以在初始化期间指定的属性。
class Typewriter{ nextStep = options = { texts: [''], element: null, typingSpeed: 200, deletingSpeed: 100, waitDurationBeforeDeleting: 2000 }; state = { currentText: '', index: 0, isDeleting: false, timeoutDuration: 200 }; constructor(options){ if(!('texts' in options) || !('element' in options)){ con('Please provide a texts string array and a parent HTML element in options'); return; } = { ..., ...options }; = { ..., timeoutSpeed: options?.typingSpeed ?? 200 } } }接下来，我们可以介绍类方法。 我们将从 start() 函数开始。 逐行来看，start()函数的逻辑如下。 我们首先从 o 数组中确定我们当前正在与之交互的文本。 然后我们完成下一个步骤（记住，下一个步骤（）将是类型（文本）或删除（文本））。 一旦 nextStep() 完成，我们将更新 DOM 上的内容。 最后，在等待指定的 timeoutDuration（将是以下值之一：o、o 或 o）后，再次调用 start() 函数。
start(){ const currentWordIndex = .index % .texts.length; const text = .texts[currentWordIndex]; .element.innerHTML = .currentText; (text) setTimeout(() => (), .timeoutDuration) }接下来，我们可以讨论 type(text) 和 delete(text) 函数。 这两个功能非常相似。 它们从我们当前正在与之交互的 o 数组中接受代表文本的文本参数。 从那里，它根据 DOM 上当前显示的内容更新 （+1 字符或 -1 字符，取决于我们是在输入还是删除）。 更新 后，它运行 determineNextStep(text) 函数。
type(text) { .currentText = (0, .currentText.length + 1); (text) } delete(text){ .currentText = (0, .currentText.length - 1); (text) }这个确定下一步步骤（文本）函数确定我们刚刚完成的步骤以及接下来应该执行的操作。 打字机可以采取四种可能的行动。
- 如果执行的最后一个操作是键入并且 currentText 等于所需的完整文本，那么下一个操作应该是删除屏幕上的文本。
- 如果执行的最后一个操作是删除并且 currentText 被完全删除，那么下一个操作应该是开始键入 o 中的下一个文本。
- 如果我们当前正在删除并且还没有完全删除 currentText，那么下一步应该是继续删除。
- 如果我们当前正在输入并且没有完全输入所需的文本，那么下一步应该是继续输入。
下面您将看到确定NextStep(text) 的代码。
determineNextStep(text){ // Currently typing and just finished typing the full text // Begin deleting after waiting the waitDurationBeforeDeleting if(!.isDeleting && .currentText === text) { .timeoutDuration = .waitDurationBeforeDeleting; .isDeleting = true; = } // Currently deleting and just finished deleting the full text // Begin typing the next text else if(.isDeleting && .currentText === '') { .timeoutDuration = .typingSpeed; .isDeleting = false; .index++ = } // Currently deleting and have not finished deleting the full text // Continue deleting else if(.isDeleting){ .timeoutDuration = .deletingSpeed; = } // Currently typing and have not finished typing the full text // Continue typing else if(!.isDeleting){ .timeoutDuration = .typingSpeed; = } }结合所有这些，Typewriter 类应如下所示：
class Typewriter{ nextStep = options = { texts: [''], element: null, typingSpeed: 200, deletingSpeed: 100, waitDurationBeforeDeleting: 2000 }; state = { currentText: '', index: 0, isDeleting: false, timeoutDuration: 200 }; constructor(options){ if(!('texts' in options) || !('element' in options)){ con('Please provide a texts string array and a parent HTML element in options'); return; } = { ..., ...options }; = { ..., timeoutSpeed: options?.typingSpeed ?? 200 } } type(text) { .currentText = (0, .currentText.length + 1); (text) } delete(text){ .currentText = (0, .currentText.length - 1); (text) } determineNextStep(text){ // Currently typing and just finished typing the full text // Begin deleting after waiting the waitDurationBeforeDeleting if(!.isDeleting && .currentText === text) { .timeoutDuration = .waitDurationBeforeDeleting; .isDeleting = true; = } // Currently deleting and just finished deleting the full text // Begin typing the next text else if(.isDeleting && .currentText === '') { .timeoutDuration = .typingSpeed; .isDeleting = false; .index++ = } // Currently deleting and have not finished deleting the full text // Continue deleting else if(.isDeleting){ .timeoutDuration = .deletingSpeed; = } // Currently typing and have not finished typing the full text // Continue typing else if(!.isDeleting){ .timeoutDuration = .typingSpeed; = } } start(){ const currentWordIndex = .index % .texts.length; const text = .texts[currentWordIndex]; (text) .element.innerHTML = .currentText; setTimeout(() => (), .timeoutDuration) } }最后，我们必须在 index.js 中初始化打字机对象，这可以通过下面的代码来完成。 在这里，我们指定了要显示的文本，以及打字机将更新的元素。 由于我没有指定 typingSpeed、deletingSpeed 或 waitDurationBeforeDeleting，因此将使用默认值。
const divElement = document.querySelector('.basic-styling') const texts = ['Hello World', 'My name is Hans', 'If you found this helpful, consider subscribing'] new Typewriter({texts: texts, element: divElement}).start()
这总结了如何创建打字机动画。 如果您觉得这有帮助，请考虑订阅。 直到下一次，快乐的编码！