前端实现打字机效果
最近做项目有做类似gpt的大模型组件，模拟返回的数据渲染时，希望实现打字机的效果，这样用户体验更好一些，于是稍微记录一下学到的可以实现的方法
不过gpt这种大模型，返回的结果都是markdown格式的，一般都是一边打字机样式展示，一边渲染markdown，后来我了解到，大模型这种问答的原理是采用的流式传输，也就是服务器一边向客户端返回数据，然后一边渲染，我们的打字机效果都是在已知结果后，显式的去刻意呈现出打字机的效果，并不是gpt那种拿到多少展示多少，如果直接使用markdown来渲染，则丢失了打字机的效果，所以还是会有所冲突，具体的实现细节可以翻阅其他博客学习，这里只记录了实现打字机效果的方法
1. 纯CSS
使用css的话，可以使用 @keyframe 实现即可，思路就是在刚开始时，设置容器宽度为0，并且超出部分隐藏，然后慢慢扩大容器宽度，使文字显示出来即可。
原理其实很简单，但是缺点是我们需要知道容器的宽度，而且只能展示一行文本，如果多行的话就需要JavaScript来实现了
1. HTML 结构
首先，你需要一个包含要显示文本的元素。可以是一个 div 或 span。
<div class="typewriter"> Hello, this is a typing effect!</div>2. CSS 样式
接下来，使用 CSS 创建打字机效果。可以通过设置 @keyframes 动画逐字显示文本。
.typewriter { font-family: monospace; /* 打字机风格的字体 */ overflow: hidden; /* 隐藏超出边界的内容 */ white-space: nowrap; /* 不换行 */ border-right: 0.15em solid black; /* 光标效果 */ width: 0; /* 初始宽度为 0 */ animation: typing 4s steps(40, end), blink-caret 0.75s step-end infinite;}/* 定义打字机动画 */@keyframes typing { from { width: 0; /* 开始时宽度为 0 */ } to { width: 100%; /* 结束时宽度为 100% */ }}/* 定义光标闪烁效果 */@keyframes blink-caret { from, to { border-color: transparent; /* 光标透明 */ } 50% { border-color: black; /* 光标可见 */ }}代码解释
.typewriter: font-family: monospace;：使用等宽字体，增强打字机效果。overflow: hidden;：隐藏超出边界的内容，确保文本在动画过程中不会显示。white-space: nowrap;：文本不换行，保持在一行中。border-right: 0.15em solid black;：创建光标效果，宽度可以根据需要调整。width: 0：初始宽度为 0，文本将逐步展开。animation: typing 4s steps(40, end), blink-caret 0.75s step-end infinite typing 动画持续 4 秒，使用 steps(40, end) 以 40 个步骤逐字显示文本（根据文本长度调整）。blink-caret 动画使光标闪烁，持续 0.75 秒，形成循环效果。infinite: 无限循环播放。 @keyframes typing： from { width: 0; }：动画开始时，宽度为 0。to { width: 100%; }：动画结束时，宽度为 100%，显示完整文本。 @keyframes blink-caret： 使用 from 和 to 设置光标颜色为透明，50% 时显示为黑色，形成闪烁效果。 补充animation动画样式字段常用属性：
animation-name: 指定要使用的动画名称（即 @keyframes 的名称）。animation-duration: 动画持续的时间。animation-timing-function: 动画的速度曲线，比如 ease、linear、ease-in、ease-out 等。animation-delay: 动画开始之前的延迟时间。animation-iteration-count: 动画播放的次数，比如 infinite（无限循环）或者具体次数。animation-direction: 动画播放的方向，normal（正向播放），reverse（反向播放），alternate（来回播放）。 完整代码
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Typing Effect</title> <style> .typewriter { font-family: monospace; overflow: hidden; white-space: nowrap; border-right: 0.15em solid black; width: 0; animation: typing 4s steps(40, end), blink-caret 0.75s step-end infinite; } @keyframes typing { from { width: 0; } to { width: 100%; } } @keyframes blink-caret { from, to { border-color: transparent; } 50% { border-color: black; } } </style></head><body><div class="typewriter"> Hello, this is a typing effect!</div></body></html>2. setInterval定时器实现
定时器的思路也比较好理解，就是拿到一长段文本后，再建一个变量用来表示要展示的文本，建立一个索引，用来表示遍历的长度，设置定时器，每隔多少秒展示一个字，索引自增，等到索引长度和文本的长度相等时，就销毁定时器释放内存
import React, { useState, useEffect } from "react";function SearchResult({ answer }) { // 使用状态来控制文字逐字加载 const [displayedAnswer, setDisplayedAnswer] = useState(""); useEffect(() => { if (answer) { let currentIndex = 0; // 设置索引为0 // 开启定时器 const interval = setInterval(() => { setDisplayedAnswer((prev) => prev + answer[currentIndex]); //依次展示文字 currentIndex += 1; //展示完成后销毁定时器 if (currentIndex >= answer?.length - 1) { clearInterval(interval); } }, 50); // 每50毫秒加载一个字 } }, [answer]); return ( <div className="search-result-container"> <div className="answer-box"> {answer && ( <p style={{ fontWeight: 600, fontSize: 18 }}>{displayedAnswer}</p> )} </div> </div> );}export default SearchResult;3. typed.js库实现
Typed.js 是一个第三方库，实现了打字机效果，可以直接使用
你可以直接在HTML中引入：
<script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.12"></script>
或者安装第三方包：
npm install typed.js
直接使用：
var options = { strings: ["Hello, this is a typing effect!", "Typed.js is easy to use!"], typeSpeed: 50, // 打字速度 backSpeed: 25, // 删除速度 loop: true // 是否循环播放 }; var typed = new Typed("#typewriter", options);