如何在 React 中实现 ChatGPT 的打字动画

由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！

ChatGPT 使用打字动画来模拟在老式电脑屏幕上打字的效果。

这段动画是通过两个重要概念实现的：

1. 文本逐个字符显示，营造出打字的错觉。
2. 闪烁的光标指示当前正在输入的字符的位置。

我们先来看看如何一次显示一个字符：

useEffect(() => {
  setCompletedTyping(false);

  let i = 0;
  const stringResponse = chatHistory[chatHistory.length - 1].content

  const intervalId = setInterval(() => {
    setDisplayResponse(stringResponse.slice(0, i));

    i++;

    if (i > stringResponse.length) {
      clearInterval(intervalId);
      setCompletedTyping(true);
    }
  }, 20);

  return () => clearInterval(intervalId);
}, [chatHistory]);

要逐字符显示文本，可以使用一个简单的setInterval函数，该函数在每个时间间隔设置一个状态变量。然后，该状态变量会显示给用户。该setInterval函数会持续调用指定的函数，直到被调用为止。在本例中，我们会在输入完整个字符串后clearInterval调用该函数。clearInterval

向用户显示的字符串来源取决于您的应用。我们使用一个useEffect钩子，该钩子会在 ChatGPT 每次向提示发送新响应时触发。我们将每个响应存储在一个名为 `response` 的对象数组中chatHistory。要仅显示数组中的最后一个响应，我们使用 `get_last_response()` chatHistory[chatHistory.length - 1].content。这将检索数组中的最后一个对象。

我把间隔设置为 20 毫秒，但您可以根据自己的应用程序进行调整。

现在，我们来创建闪烁的光标。我们使用 `and`SVG和CSS关键帧来实现这种效果：

这是通过使用关键帧实现SVG的CSS。

我们为此目的使用的工具SVG如下：

<svg
  viewBox="8 4 8 16"
  xmlns="http://www.w3.org/2000/svg"
  className="cursor"
>
  <rect x="10" y="6" width="4" height="12" fill="#fff" />
</svg>

注意这个cursor className。它的样子如下：

.cursor {
  display: inline-block;
  width: 1ch;
  animation: flicker 0.5s infinite;
  margin-bottom: 4px;
}

这将为flicker文本添加动画效果SVG，并确保动画与正在输入的文本正确对齐，并inline与之一起显示。

这里提到的动画flicker如下：

@keyframes flicker {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

然后，您需要将 包含SVG在您的 中JSX。这将确保SVG仅在输入正在进行且尚未完成时可见。

<span>
  {displayResponse}
  {!completedTyping && <CursorSVG />}
</span>

完成这些步骤后，您就能实现标志性的 ChatGPT 输入动画！

GIF

如果您想查看我用来实现此效果的源代码，可以点击此链接访问我的 GitHub 仓库：
https://github.com/STIAANWOL/therapistgpt

如果您想通过实时演示来观看此效果，可以点击此链接：
https://therapistgpt-stiaanwol.vercel.app/

希望这对您有所帮助，祝您编程愉快！