Node.js を使用したターミナル アニメーション

Node.js には、stdout に接続されたストリームである stdout プロパティを持つプロセス オブジェクトがあります。 process.stdout プロパティを使用すると、列、行、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 の Lukas による写真

---

ご意見、ご質問、アイデアをコメント欄に投稿してください。? を押してください。ボタンを押してハッキングを楽しんでください! ??

以上がNode.js を使用したターミナル アニメーションの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。