Terminalanimationen mit Node.js

Node.js verfügt über das Prozessobjekt mit der stdout-Eigenschaft, bei dem es sich um einen Stream handelt, der mit stdout verbunden ist. Mithilfe der Eigenschaft „process.stdout“ können wir auf mehrere nützliche Eigenschaften und Methoden zugreifen: Spalten, Zeilen, CursorTo und Schreiben. Dies sind wesentliche Voraussetzungen, um etwas im Terminal zu „animieren“.

Stellen Sie sich vor, wir möchten eine fallende „Figur“ von oben nach unten auf dem Bildschirm animieren, was ein kleiner Teil der „Digital Rain“-Animation aus dem Matrix-Film sein könnte.

Dazu benötigen wir mehrere Schritte:

• Schreiben Sie das Zeichen in einer Ausgangsposition.
• Machen Sie eine Pause.
• Entfernen Sie das Zeichen.
• Schreiben Sie das Zeichen an eine neue Position.
• Wiederholen...

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()

Sie können hier mit diesem Code spielen.

Als nächstes wird es schön sein, unserer Animation einige Farben hinzuzufügen. Dafür können wir die großartige Ansis-Bibliothek nutzen.

Lassen Sie uns etwas in grüner Farbe ausgeben:

/* 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)

Oder noch besser animieren Sie die Farbe von Dunkel- zu Hellgrün:

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()

Mit diesen einfachen Ideen und Animationstechniken können wir etwas Interessantes und Cooles erschaffen. ?

Sehen Sie den digitalen Matrix-Regen in Aktion mit dem Befehl npx jmatrix und schauen Sie sich den Quellcode auf Github an.

Credits

Foto von Lukas auf Unsplash

---

Bitte posten Sie Ihre Gedanken, Fragen und Ideen in den Kommentaren, drücken Sie das ? Button und viel Spaß beim Hacken! ??

Das obige ist der detaillierte Inhalt vonTerminalanimationen mit Node.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!