浏览器中的 Ascii 艺术动画

如何解决浏览器中的 Ascii 艺术动画

我想在浏览器中制作 Ascii Art 动画。 Ascii Art 应通过文本文件加载。有许多可以转换的库，但我没有发现它们实际上可以对其进行动画处理。

我所说的动画是指一种打字机动画，它会随着时间的推移而加速并改变“缩放系数”，以便最后在视口中可以看到整个图像。

希望有人知道我的问题的库。

解决方法

我有一种感觉，SO 不喜欢图书馆推荐，实际上我还没有找到，所以这里有一些基本代码可以帮助您入门。

它将打字速度设置为旧的 Teletype 每秒 10 个字符，当然可以更改，并且可以在您知道自己想要什么时添加加速功能。注意：txt 文件需要在同一个域中，以防止 CORS 问题。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Typewriter print</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    
    body {
      font-family: Courier,monospace;
      font-size: 12px;
    }
  </style>
</head>

<body>
  <div id="container">
    <input id="file" type="text" value="" placeholder="Filename" />
    <button onclick="loadFile()">Click to draw the file</button>
    <div id="picture"></div>
  </div>
  <script>
    let file = '';
    let reader = new XMLHttpRequest();

    function loadFile() {
      file = document.getElementById('file').value;
      reader.open('get',file,true);
      reader.onreadystatechange = draw;
      reader.send(null);
    }

    function draw() {
      if (reader.readyState == 4) {
        const picture = document.getElementById('picture');
        picture.innerHTML = '';
        let str = reader.responseText;
        let chs = str.split('');
        //set as the typing speed in characters
        //per second 10 is the old teletype speed
        let chsPerSec = 10;
        let i = 0;

        function reveal() {
          if (i < chs.length) {
            let nextch = chs[i];
            if (nextch.charCodeAt(0) == 10) {
              nextch = '<br>';
            } else if (nextch.charCodeAt(0) == 32) {
              nextch = '<span style="color:transparent;">.</span>';
            }
            picture.innerHTML = picture.innerHTML + nextch;
            setTimeout(reveal,Math.floor(1000 / chsPerSec));
            i++;
          }
        }
        reveal();
      }
    }
  </script>
</body>
</html>