浏览器中的 Ascii 艺术动画

Question

我想在浏览器中为 Ascii Art 制作动画。 Ascii Art 应该通过文本文件加载。有很多库可以转换，但我发现 none，它实际上是动画的。

我所说的动画是指打字机动画，它会随着时间的推移而加速并更改 'zoom factor' 以便整个图像最终在视口中可见。

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

Answer 1

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

它将打字速度设置为每秒 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>

浏览器中的 Ascii 艺术动画

Ascii Art Animation in Browser

javascript

browser

animation

ascii-art