Animasi Terminal dengan Node.js

Node.js mempunyai objek proses dengan sifat stdout yang merupakan aliran yang disambungkan ke stdout. Menggunakan sifat process.stdout, kita boleh mengakses beberapa sifat dan kaedah yang berguna: lajur, baris, kursorKe dan tulis. Ini adalah perkara penting untuk memulakan "menghidupkan" sesuatu dalam terminal.

Bayangkan kita ingin menghidupkan "watak" yang jatuh dari atas ke bawah skrin, yang boleh menjadi sebahagian kecil daripada animasi "hujan digital" daripada filem Matrix.

Untuk melakukan ini, kami memerlukan beberapa langkah:

• Tulis watak dalam kedudukan permulaan.
• Jeda.
• Alih keluar watak.
• Tulis watak ke kedudukan baharu.
• Ulang...

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

Anda boleh bermain dengan kod ini di sini.

Seterusnya, adalah bagus untuk menambah beberapa warna pada animasi kami. Kita boleh menggunakan perpustakaan Ansis yang hebat untuk itu.

Mari keluarkan sesuatu dalam warna hijau:

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

Atau lebih baik menghidupkan warna daripada hijau gelap kepada hijau muda:

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

Kita boleh mencipta sesuatu yang menarik dan kelihatan keren menggunakan idea mudah dan teknik animasi ini. ?

Lihat hujan digital Matrix beraksi dengan arahan npx jmatrix dan lihat kod sumber pada Github.

Kredit

Foto oleh Lukas di Unsplash

---

Sila siarkan pendapat, soalan dan idea anda dalam ulasan, tekan butang ? butang, dan selamat menggodam! ??

Atas ialah kandungan terperinci Animasi Terminal dengan Node.js. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!