浏览器中的 Ascii 艺术 Animation

Question

我想在浏览器中为 Ascii 艺术制作动画。 Ascii Art 应通过文本文件加载。 有许多库可以转换，但我没有找到，实际上是动画它。

animation 我的意思是打字机 animation，它会随着时间的推移而加速并改变“缩放因子”，以便最终在视口中看到整个图像。

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

Answer 1

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

它将打字速度设置为旧的 Teletype 每秒 10 个字符，当然可以更改，当您知道自己想要什么时，可以添加加速度 function。 注意：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 艺术 Animation

问题描述

1 个解决方案

解决方案1
0 已采纳 2020-12-31 12:15:36

浏览器中的 Ascii 艺术 Animation

问题描述

1 个解决方案

解决方案1 0 已采纳 2020-12-31 12:15:36

解决方案1
0 已采纳 2020-12-31 12:15:36