如何在用JavaScript或NodeJs编写的控制台应用程序中制作加载动画

How to make a loading animation in Console Application written in JavaScript or NodeJs?

本文关键字：应用程序 控制台 动画 加载 JavaScript NodeJs      更新时间：2023-09-26

如何在用JavaScript或NodeJs编写的控制台应用程序中制作加载动画？

示例动画或其他动画。

1. --
2. '
3. |
4. /
5. --

在浏览器控制台中实际上是不可能的。在节点.js中：

var twirlTimer = (function() {
  var P = ["''", "|", "/", "-"];
  var x = 0;
  return setInterval(function() {
    process.stdout.write("'r" + P[x++]);
    x &= 3;
  }, 250);
})();

您也可以在浏览器控制台中执行此操作： 

var loading = (function() {
  var h = ['|', '/', '-', ''''];
  var i = 0;
  return setInterval(() => {
    i = (i > 3) ? 0 : i;
    console.clear();
    console.log(h[i]);
    i++;
  }, 300);
})();
// clearInterval(loading) to stop it.

setInterval（） 方法每 250 毫秒在控制台上打印 p 数组中的值，以指定的间隔（以毫秒为单位）调用函数或计算表达式。setTimeout（） 方法在指定的毫秒数后调用函数或计算表达式。setInterval 在这里用作循环。使用 clearInterval，循环在 5000 毫秒后使用 setTimeout 中断。

const P = ['''', '|', '/', '-'];
let x = 0;
const loader = setInterval(() => {
  process.stdout.write(`'r${P[x++]}`);
  x %= P.length;
}, 250);
setTimeout(() => {
  clearInterval(loader);
}, 5000);

你可以试试这个包：

https://github.com/ErAz7/Termination

它支持

  • 基于承诺的传输
  • 缓动转换函数
  • 循环过渡
  • 帧率控制
  • 播放速度控制
  • 画布大小选项
  • 颜色

以及其他一些有用的功能，可以在终端上创建动画，就像小菜一碟！

相关文章：