如何在 React 中构建 ChatGPT 打字动画
130 浏览量
2023-05-05
13:16:05
上传
评论
收藏 70KB DOCX 举报
让我们从研究如何一次显示一个字符开始：
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 向提示发送新响应时触发。
我们将每个响应存储在一个名为 的对象数组中 chatHistory。要仅
显示数组中的最后一个响应，我们使用 chatHistory[chatHistory.length -
1].content. 这将检索数组中的最后一个对象。
我将间隔设置为 20 毫秒，但您可以调整它以适合您的应用程序。
现在，让我们继续创建闪烁的光标。我们使用一个 SVG 和 CSS 关
键帧来实现这个效果：
资源评论
