4种方法教你用JS实现打字机效果，炫酷文字动画soeasy！

想要为你的网站添加酷炫的文字动画效果吗？本文为你详解4种JS实现打字机效果的方法，助你轻松打造引人注目的网页互动！从基础的`setInterval + substring`，到更流畅的`requestAnimationFrame + 递归`，再到适用于异步场景的`Promise + async/await`，以及性能最佳的`CSS animation + JS控制`，每种方法都配有详细代码示例和优缺点分析。文章还深入探讨了如何实现打字机效果的暂停与恢复、支持HTML标签以及添加删除（回退）效果。无论你是前端新手还是经验丰富的开发者，都能从中找到适合你的解决方案，让你的网站文字“活”起来！立即学习，提升你的网页设计技巧！

要实现JS打字机效果，核心在于控制文本逐字显示的速度和方式。方法包括：1. 使用setInterval + substring，通过定时截取字符更新显示内容，简单但控制力弱；2. requestAnimationFrame + 递归，利用浏览器重绘机制提升动画流畅度；3. Promise + async/await，适用于异步场景，代码更清晰易维护；4. CSS animation + JS控制，性能最佳但灵活性差。暂停与恢复可通过清除或重启定时器、标志位控制实现。支持HTML标签可通过解析字符串分别处理标签和文本节点。删除效果则通过切换打字与回退状态实现，从末尾逐字删除并循环执行。

要实现JS打字机效果，核心在于控制文本逐字显示的速度和方式，模拟人工打字的过程。

解决方案

以下是四种实现JS打字机效果的方法，各有侧重：

1. setInterval + substring： 这是最基础的方法。使用setInterval定时器，每次从完整文本中截取一个字符，更新显示文本。

   

   const text = "Hello, world! This is a typewriter effect.";
   const element = document.getElementById("typewriter");
   let index = 0;
   
   function typeWriter() {
     if (index < text.length) {
       element.innerHTML = text.substring(0, index + 1);
       index++;
       setTimeout(typeWriter, 50); // 调整速度
     }
   }
   
   typeWriter();

   这种方式简单直接，但对复杂场景控制力稍弱，例如暂停、回退等。

2. requestAnimationFrame + 递归： 使用requestAnimationFrame可以获得更平滑的动画效果，避免setInterval可能出现的丢帧问题。 递归调用自身，直到文本全部显示完毕。

   const text = "Another example with requestAnimationFrame.";
   const element = document.getElementById("typewriter2");
   let index = 0;
   
   function typeWriterRAF() {
     if (index < text.length) {
       element.innerHTML = text.substring(0, index + 1);
       index++;
       requestAnimationFrame(() => {
         setTimeout(typeWriterRAF, 50); // 保持速度一致
       });
     }
   }
   
   typeWriterRAF();

   requestAnimationFrame 会在浏览器下一次重绘之前执行，性能更好。

3. Promise + async/await： 这种方式更适合处理异步数据或需要串行执行的打字效果。例如，从服务器获取文本后，再进行打字动画。

   const text = "Typing with async/await and Promises.";
   const element = document.getElementById("typewriter3");
   let index = 0;
   
   function typeCharacter(char) {
     return new Promise(resolve => {
       setTimeout(() => {
         element.innerHTML += char;
         resolve();
       }, 50);
     });
   }
   
   async function typeWriterAsync() {
     for (let i = 0; i < text.length; i++) {
       await typeCharacter(text[i]);
     }
   }
   
   typeWriterAsync();

   async/await 使得异步代码更易读，更易于维护。

4. CSS animation + JavaScript控制： 将打字效果的字符显示隐藏交给CSS动画控制，JS负责添加和移除字符。

   <style>
   #typewriter4 {
     width: 0;
     overflow: hidden;
     white-space: nowrap;
     animation: typing 5s steps(40, end); /* 40 是文本长度 */
   }
   
   @keyframes typing {
     from { width: 0 }
     to { width: 100% }
   }
   </style>
   
   <div id="typewriter4">CSS Animation Typewriter Effect.</div>

   这种方式性能最好，动画效果也更流畅，但灵活性稍差。需要提前知道文本长度，并设置合适的steps。

如何实现打字机效果的暂停和恢复？

对于setInterval和requestAnimationFrame方法，可以通过清除定时器或取消动画帧来实现暂停。 恢复时，重新启动定时器或动画循环。

// 以 setInterval 为例
let intervalId;

function startTypeWriter() {
  intervalId = setInterval(typeWriter, 50);
}

function stopTypeWriter() {
  clearInterval(intervalId);
}

// 调用 startTypeWriter() 启动， stopTypeWriter() 暂停

对于async/await，可以通过设置一个标志位来控制循环的执行。

let isPaused = false;

async function typeWriterAsync() {
  for (let i = 0; i < text.length; i++) {
    while (isPaused) {
      await new Promise(resolve => setTimeout(resolve, 100)); // 等待恢复
    }
    await typeCharacter(text[i]);
  }
}

function pauseTypeWriter() {
  isPaused = true;
}

function resumeTypeWriter() {
  isPaused = false;
}

如何让打字机效果支持HTML标签？

直接使用innerHTML插入带HTML标签的字符串可能会导致标签被转义。 一种解决方案是，将HTML标签也作为字符处理，逐个添加到元素中。

另一种更复杂的方法是，解析HTML字符串，将文本节点和HTML元素分别处理。文本节点使用打字机效果，HTML元素直接插入。 这需要一个简单的HTML解析器。

// 简化示例，仅处理简单的<b>标签
function typeWriterWithHTML(htmlString, element) {
  let currentIndex = 0;

  function typeNext() {
    if (currentIndex < htmlString.length) {
      const char = htmlString[currentIndex];
      if (char === '<') {
        // 假设只处理 <b> 标签
        if (htmlString.substring(currentIndex, currentIndex + 3) === '<b>') {
          element.innerHTML += '<b>';
          currentIndex += 3;
        } else if (htmlString.substring(currentIndex, currentIndex + 4) === '</b>') {
          element.innerHTML += '</b>';
          currentIndex += 4;
        } else {
          element.innerHTML += char; // 其他标签直接输出
          currentIndex++;
        }
      } else {
        element.innerHTML += char;
        currentIndex++;
      }
      setTimeout(typeNext, 50);
    }
  }

  typeNext();
}

const htmlText = "This is <b>bold</b> text with typewriter effect.";
const element = document.getElementById("typewriter5");
typeWriterWithHTML(htmlText, element);

如何实现删除效果（回退）？

在打字机效果的基础上，增加一个删除字符的逻辑。可以设置一个标志位，用于切换打字和删除状态。

let isDeleting = false;
let index = text.length; // 从文本末尾开始删除

function typeWriter() {
  if (isDeleting) {
    index--;
    element.innerHTML = text.substring(0, index);
  } else {
    index++;
    element.innerHTML = text.substring(0, index);
  }

  if (index === text.length + 1) {
    isDeleting = true; // 开始删除
  }

  if (index === 0) {
    isDeleting = false; // 停止删除，重新开始打字
  }

  setTimeout(typeWriter, 50);
}

这种方式可以实现一个循环的打字和删除效果。

以上就是《4种方法教你用JS实现打字机效果，炫酷文字动画soeasy！》的详细内容，更多关于JavaScript,动画,实现方法,打字机效果,CSSanimation的资料请关注golang学习网公众号！