浏览器中的 Ascii 艺术 Animation

Question

I want to animate Ascii Art in the Browser.我想在浏览器中为 Ascii 艺术制作动画。 The Ascii Art should be loaded via a text file. Ascii Art 应通过文本文件加载。 There are many libraries which convert but I have found none, which actually animates it.有许多库可以转换，但我没有找到，实际上是动画它。

By animation I mean a typewriter animation that speeds up over time and changes the 'zoom factor' so that the whole image is visible in the viewport at the end. animation 我的意思是打字机 animation，它会随着时间的推移而加速并改变“缩放因子”，以便最终在视口中看到整个图像。

Hopefully anyone knows a libary for my problem.希望有人知道我的问题的库。

Answer 1

I have a feeling SO doesn't like library recommendations, and actually I haven't found one, so here's some basic code to get you started.我有一种感觉 SO 不喜欢图书馆推荐，实际上我还没有找到，所以这里有一些基本代码可以帮助您入门。

It sets the typing speed to the old Teletype 10 chars per second and of course that can be changed, and an acceleration function can be added when you know what you want for that.它将打字速度设置为旧的 Teletype 每秒 10 个字符，当然可以更改，当您知道自己想要什么时，可以添加加速度 function。 Note: the txt file needs to be on the same domain to prevent CORS problems.注意：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