前端实现打字机效果

最近做项目有做类似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);

标签：前端 react.js javascript

本文转载自: https://blog.csdn.net/m0_73555097/article/details/143364390
版权归原作者 CuTmor 所有，如有侵权，请联系我们删除。

前端实现打字机效果