纯前端实现打字机效果

前端实现打字机效果一个简单的方法就是采用定时器做字符串拼接，让文字一个一个显示出来，可以使用间隔定时器setInterval来控制文字拼接的速度

 一、用一个div来显示打字机文本内容

<div class="msg-text cursor-ani">{{ dialogueAnswer }}</div>

二、字符串拼接实现

1、在data里定义以下几个变量

data() {
  return {
    answer: "", // 打字机内容
    timer: null, // 定时器
    interTime: 10, // 初始化间隔时间
    interArr: [20, 30, 10, 20, 80, 30, 15, 400, 50, 20], // 为了使打字机效果更真实间隔时间设置了一个数组，单位是ms
  }
}

2、文本处理 

// 接收后端websocket返回的内容
receverMessage(e) {
  console.log(e, '------------接收数据')
  if (e.data) {
      this.answer = e.data.content; // 打字机文本内容
      clearInterval(this.timer); // 清除定时器
      this.timer = setInterval(this.setContent, this.interTime);
   }
},

setContent() {
  if (this.dialogueAnswer.length >= this.answer.length) {
    // 说明文本已全部输出，清除定时器，结束执行
    clearInterval(this.timer);
    return;
  } else {
    this.dialogueAnswer += this.answer.charAt(this.dialogueAnswer.length);
    this.interTime = this.interArr[Math.floor(Math.random() * 10)];
    clearInterval(this.timer);
    this.timer = setInterval(this.setContent, this.interTime);
  }
}

有几个需要注意的地方：

1）charAt()函数，该方法参数为一个整数，也就是索引下标，返回值是下标对应的字符

2）Math.floor(Math.random() * 10)，floor向下取整，随机生成0-9的整数，从而实现每次定时器的间隔时间不同

3）特别需要注意setInterval(fn, time)想要做到间隔时间不同，不能简单的修改time的时间，这样是不会生效的，必须先清除定时器再重新定义，重新设置时间参数

三、光标闪烁动画效果

为了让打字机效果更真实，更像输入的效果，可以做一个光标动画，模拟输入，这里是通过伪类实现的

.cursor-ani {
   position: relative;
}

.cursor-ani::after {
   content: '';
   position: absolute;
   width: 1px;
   height: 16px;
   background: #333;
   transform: translateX(3px) translateY(3px);
   animation: cursor-blinks 0.8s infinite forwards;
}

@keyframes cursor-blinks {
   from {
     opacity: 0;
   }

   to {
     opacity: 1;
   }
}

四、效果

 这世界很喧嚣，做你自己就好