使用 Node.js 的終端動畫

Node.js 具有帶有 stdout 屬性的進程對象，它是連接到 stdout 的流。使用 process.stdout 屬性，我們可以存取幾個有用的屬性和方法：columns、rows、cursorTo 和 write。這些是在終端機中啟動“動畫”某些內容的必需條件。

想像一下，我們想要為一個從螢幕上到下下落的「角色」製作動畫，這可能是《駭客任務》電影中「數位雨」動畫的一小部分。

為此，我們需要幾個步驟：

• 將字元寫在起始位置。
• 暫停一下。
• 刪除角色。
• 將角色寫入新位置。
• 重複...

const column = 0
const character = '$'

/* Pause for 1 second (1000 ms) */
const pause = () => new Promise((resolve) => setTimeout(resolve, 1000))

const main = async () => {
  /* Clear screen */
  console.clear()
  /* Hide cursor */
  process.stderr.write('\x1B[?25l')

  /* The number of rows */
  const rows = process.stdout.rows

  /* Starting from the first row on the top of the screen.
   * Going to the bottom of the screen `process.stdout.rows`.
   */
  for (let row = 0; row < rows; row++) {
    /* Set cursor into position `cursorTo(x, y)`
     * and write a character */
    process.stdout.cursorTo(column, row)
    process.stdout.write(character)
    /* Pause for 1 second */
    await pause()
    /* Set cursor into position and clear the character
     * (write a space) */
    process.stdout.cursorTo(column, row)
    process.stdout.write(' ')
  }

  /* Show cursor */
  process.stderr.write('\x1B[?25h')
}

main()

您可以在這裡使用此程式碼。

接下來，為我們的動畫添加一些顏色會很不錯。為此，我們可以使用出色的 Ansis 庫。

讓我們輸出一些綠色的東西：

/* import Ansis library */
import { green } from 'ansis'

const character = '$'

/* Apply green color to our character */
const coloredCharacter = green`${character}`

/* Write colored character to the terminal */
process.stdout.write(coloredCharacter)

或更好地將顏色從深綠色設定為淺綠色：

import { rgb } from 'ansis'

const column = 0
const character = '$'

/* Pause for 1 second (1000 ms) */
const pause = () => new Promise((resolve) => setTimeout(resolve, 1000))

const main = async () => {
  /* Clear screen */
  console.clear()
  /* Hide cursor */
  process.stderr.write('\x1B[?25l')

  /* The number of rows */
  const rows = process.stdout.rows

  /* Starting from the first row on the top of the screen.
   * Going to the bottom of the screen `process.stdout.rows`.
   */
  for (let row = 0; row < rows; row++) {
    /* Use the `rgb` function to change color
     * from dark to light green */
    const g = Math.floor((255 / rows) * row)
    const coloredCharacter = rgb(0, g, 0)`${character}`

    /* Set cursor into position `cursorTo(x, y)`
     * and write a character */
    process.stdout.cursorTo(column, row)
    process.stdout.write(coloredCharacter)
    /* Pause for 1 second */
    await pause()
    /* Set cursor into position and clear the character
     * (write a space) */
    process.stdout.cursorTo(column, row)
    process.stdout.write(' ')
  }

  /* Show cursor */
  process.stderr.write('\x1B[?25h')
}

main()

我們可以使用這些簡單的想法和動畫技術來創造一些有趣且看起來很酷的東西。 ？

使用 npx jmatrix 指令查看 Matrix 數位雨的運作情況，並查看 Github 上的原始碼。

製作人員

盧卡斯在 Unsplash 上拍攝的照片

---

請在評論中發表您的想法、問題和想法，按？按鈕，祝駭客快樂！ ??

以上是使用 Node.js 的終端動畫的詳細內容。更多資訊請關注PHP中文網其他相關文章！