问题描述
我想在浏览器中制作 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>