Node.js를 사용한 터미널 애니메이션

Node.js에는 stdout에 연결된 스트림인 stdout 속성을 가진 프로세스 개체가 있습니다. process.stdout 속성을 사용하면 열, 행, 커서To 및 쓰기와 같은 여러 유용한 속성과 메서드에 액세스할 수 있습니다. 이는 터미널에서 무언가를 "애니메이션"으로 시작하는 데 필수적인 요소입니다.

화면 위에서 아래로 떨어지는 "캐릭터"를 애니메이션화하고 싶다고 상상해 보세요. 이는 매트릭스 영화의 "디지털 비" 애니메이션의 작은 부분일 수 있습니다.

이를 위해서는 몇 가지 단계가 필요합니다.

• 시작 위치에 문자를 씁니다.
• 일시 중지하세요.
• 캐릭터를 삭제하세요.
• 캐릭터를 새로운 위치에 씁니다.
• 반복합니다...

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!