瀏覽器中的 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