实现类似gpt 打字效果

news2025/2/9 0:14:01

1. css的动画（animation)

css中实现动画有两种方式：transition过渡动画、 animation自定义动画。

具体的可以看MDN链接：https://developer.mozilla.org/zh-CN/docs/Web/CSS/animation

使用@keyframes自定义关键帧动画并未其命名
使用自定义动画的时候，需要对animation属性进行配

属性	含义
animation-name	指定一个或多个@keyframes自定义的动画名字，当多个的时候用，隔开。例如：anination-name:test1,test2
animation-duration	指完成一个动画的所需要的时间
animation-timing-function	指动画效果在每个周期内是如何进行的例如：linear：匀速运动 ease-in: 由慢到快 ease-out: 由快到慢 ease-in-out：由慢到快在到慢 steps(n, <jumpterm>)：将动画分为n分，然后按照n个定格显示动画效果
animation-delay	设置动画延迟时间（s/ms)，默认为0，当为负数的时候，代表立即执行 *****适合当多个动画的时候，可依次定义每个动画的延迟执行时间，区分开每个动画。
animation-iteration-count	动画执行次数，默认执行一次，infinite无限执行可以指定多个动画效果，用，隔开
animation-direction	动画的运动方向例如：reverse：反方向播放 alternate：正反交替播放（循环）
animation-fill-mode	设置动画在执行前后的样式例如：forwards ：目标元素保持最后一帧动画 backwards：目标元素保持起始帧动画
animation-play-state	设置动画是暂停还是开始

2 . 使用animation 动画实现一个简单的打字效果

js/css 代码如下

    const contentDiv = document.querySelector('#content')
      const data = '最简单的打字机效果实现'.split('')
      let index = 0
      function writing() {
        if (index < data.length) {
          contentDiv.innerHTML += data[index++]
          setTimeout(writing, 100)
          // requestAnimationFrame(writing)
        }
      }
      writing()

      #content {
        height: 400px;
        padding: 10px;
        font-size: 28px;
        background-color: #eee;
        border-radius: 20px;
      }
      #content::after {
        color: #f00;
        animation: blink 1s infinite;
        content: '|';
      }
      @keyframes blink {
        from {opacity: 0;}
        to {opacity: 1;}
      }

效果如图：

3. 接入SSE,使用后台推送的数据，来动态实现打字效果

选SSE,主要是是我们不需要向后台推送数据，只需要实时接收就可以，SSE返回的是流式输出的数据

我们可以使用node 自己写一个sse 接口，如：

因为我们使用的模块的格式写的接口，所以需要在app.js里引入（一定要设置允许跨域，不然会出现跨域的情况）

在需要的页面中使用new EventSource来接入就可以了

具体关于SSE的可以看MDN的链接：https://developer.mozilla.org/zh-CN/docs/Web/API/EventSource

可以看到控制台是以流式来推数据的

把后台返回的数据，进行拼接展示

   <script>
      const contentDiv = document.querySelector('#content')
      let currentContent = '' // 存储当前显示的内容
      function writing(text) {
        let index = 0
        function appendText() {
          if (index < text.length) {
            currentContent += text[index]
            contentDiv.innerHTML = currentContent
            index++
            setTimeout(appendText, 100) // 调整这个时间来改变打字速度
          }
        }
        appendText()
      }
      const sse = new EventSource('http://localhost:3000/user/sse')
      sse.addEventListener('message', (event) => {
        const data = JSON.parse(event.data)
        writing(data.msg)
      })
    </script>

效果截图如下：