前端实现打字机效果
最近做项目有做类似gpt的大模型组件，模拟返回的数据渲染时，希望实现打字机的效果，这样用户体验更好一些，于是稍微记录一下学到的可以实现的方法
不过gpt这种大模型，返回的结果都是markdown格式的，一般都是一边打字机样式展示，一边渲染markdown，后来我了解到，大模型这种问答的原理是采用的流式传输，也就是服务器一边向客户端返回数据，然后一边渲染，我们的打字机效果都是在已知结果后，显式的去刻意呈现出打字机的效果，并不是gpt那种拿到多少展示多少，如果直接使用markdown来渲染，则丢失了打字机的效果，所以还是会有所冲突，具体的实现细节可以翻阅其他博客学习，这里只记录了实现打字机效果的方法
1. 纯CSS
使用css的话，可以使用
@keyframe
实现即可，思路就是在刚开始时，设置容器宽度为0，并且超出部分隐藏，然后慢慢扩大容器宽度，使文字显示出来即可。
原理其实很简单，但是缺点是我们需要知道容器的宽度，而且只能展示一行文本，如果多行的话就需要JavaScript来实现了
1. HTML 结构
首先，你需要一个包含要显示文本的元素。可以是一个
div
或
span
。
<divclass="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（来回播放）。
完整代码
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="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><divclass="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/[email protected]"></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 =newTyped("#typewriter", options);
本文转载自: https://blog.csdn.net/m0_73555097/article/details/143364390
版权归原作者 CuTmor 所有， 如有侵权，请联系我们删除。
版权归原作者 CuTmor 所有， 如有侵权，请联系我们删除。