实现GPT多行打字机效果

前言

多行打字机效果，在刚接触前端的时候，就想去实现，只是后来都忘记了。最近在用AI的时候，突然想起来了，来简单的实现一下。先来看看效果。

后面有代码地址。

正文

原理：每一段话其实就是一个单行打字机，然后控制光标是否出现和每一段话开始结束。

1. 光标实现

光标我们可以使用伪元素配合循环动画来实现，并且在不需要时，将光标的宽度变为0，并去除动画

import styled from 'styled-components';


export const Item = styled.div<{
  hideCursor: boolean;
}>`
  word-break: break-all;

  &::after{
    content: '';
    width: ${props => props.hideCursor ? '0px' : '3px'} ;
    height: 24px;
    display: inline-block;
    margin-left: 3px;
    background-color: white;
    animation-name: ${props => props.hideCursor ? 'null' : 'blink'};
    animation-duration: 0.5s;
    animation-iteration-count: infinite;

    @keyframes blink {
      0% {
      opacity: 1;
      }
      50% {
        opacity: 0;
      }
      100% {
        opacity: 1;
      }
    }
  }
`

1. 逐字输出效果

其实就是一个递归，每次填充一个字符，当长度到的时候，结束递归。

1. 控制多行效果

这是组件的Props

interface Props {
  /** 文字列表 */
  textList?: string[];
  /** 每段文字停顿时间 */
  interval?: number;
  /** 每个字符停顿时间 */
  charInterval?: number;
}

我们需要一个标记（currentTextInd）来记录当前是哪一段话正在进行打字机效果。只显示下标小于等于currentTextInd的文字段。

是否隐藏光标。当currentTextInd没到边界时，下标不等于currentTextInd的文字段光标都隐藏；。当currentTextInd到边界时，下标小于边界的文字段光标都隐藏。

在currentTextInd改变的时候，我们重新执行2（逐字输出效果），就可以达到最后的效果。

结语

感兴趣的可以试一下

仓库地址：function-realization: 实现一些有趣的功能 (gitee.com)