Auto Writer

자동으로 글이 작성되는 애니메이션 툴입니다.

Installation

CLI에서 설치할 프로젝트에서 다음과 같은 명령으로 설치합니다.

npm install --save-dev auto-writer
bun add -d auto-writer

Using

기초적인 사용법은 다음과 같습니다. 함수를 사용하는 코드는 autoWriter(ELEMENT: HTMLElement, OPTIONS: object)으로 구성되어 있습니다.

import autoWriter from 'auto-writer'

autoWriter(document.getElementById('text'), {
  text: 'message text'
})

첫번째 파라메터값인 ELEMENT값을 null로 넣고, stream 콜백함수에서 직접 제어할 수 있습니다.

Options

다음과 같이 옵션 파라메터로 사용할 수 있습니다.

Name	Type	Value	Description
text	string	'message text'	최종적으로 표시되는 텍스트
waitChar	string	'-'	변경되기전에 표시되는 텍스트
charSpeed	number	1	한번에 바뀌는 글자의 갯수
moveFix	number	25	waitChar문자에서 랜덤문자로 바뀔때의 딜레이 시간
moveRange	number	10	대기문자에서 랜덤 글자로 바뀌는 시간
moveTrigger	number	25	만들어지는 글자가 랜덤으로 바뀌는 횟수
fps	number	60	속도
pattern	string	'abcdefg0123456789'	랜덤으로 표시되는 문자패턴
randomTextType	string	'unicode'	랜덤 텍스트 종류
stream	function	null	글자가 바뀔때마다 호출되는 함수

pattern

사용할만한 글자 패턴입니다.

기본값

abcdefghijklmnopqrstuvwxyz0123456789-_!@#$%^&*()+~<>

한글과 영문, 숫자, 특수문자

abcdefghijklmnopqrstuvwxyz0123456789-_!@#$%^&*()+~<>ㄱㄴㄷㄹㅁㅂㅅㅇㅈㅊㅋㅌㅍㅎㄲㄸㅃㅆㅉ

한글만

ㄱㄴㄷㄹㅁㅂㅅㅇㅈㅊㅋㅌㅍㅎㄲㄸㅃㅆㅉ

Examples

auto-writer 함수 사용 예제들입니다.

Another pattern text

다른 패턴으로 사용합니다.

import autoWriter from 'auto-writer'

autoWriter(document.getElementById('text'), {
  text: '여우비가 내리는 날에는 기분이 설레인다.',
  pattern: 'ㄱㄴㄷㄹㅁㅂㅅㅇㅈㅊㅋㅌㅍㅎㄲㄸㅃㅆㅉ',
  randomTextType: 'pattern',
})

Random color

상태에 따라 다른 색상으로 표현할 수 있습니다. 하지만 애니메이션이 일어날때마다 엘리먼트를 만들기 때문에 성능에 영향을 줄 수 있습니다.

애니메이션 틱이 호출될때 stream 옵션 콜백함수로 직접 텍스트 엘리먼트를 만들고 타겟 엘리먼트에 집어넣습니다.

const colors = [
  '#f44336', '#e91e63', '#9c27b0', '#673ab7', '#3f51b5',
  '#2196f3', '#03a9f4', '#00bcd4', '#009688', '#4caf50',
  '#8bc34a', '#cddc39', '#ffeb3b', '#ffc107', '#ff9800',
  '#ff5722', '#795548', '#9e9e9e', '#607d8b',
]
const $target = document.getElementById('text')

autoWriter(null, {
  text: 'Random Color Text',
  stream: arr => {
    $target.innerHTML = ''
    for (let i = 0; i < arr.length; i++) {
      let tag = document.createElement('span')
      tag.append(arr[i].t)
      switch(arr[i].m) {
        case 'wait':
          // 애니메이션 전 대기 문자
          tag.style.color = 'silver'
          break
        case 'new':
          // 애니메이션 중 랜덤으로 바뀌는 문자
          tag.style.color = colors[Math.floor(Math.random() * colors.length)]
          break
        case 'done':
        default:
          // 애니메이션이 완료된 문자
          tag.style.color = 'black'
          break
      }
      $target.append(tag)
    }
  },
}).then((text) => {
  // 최종적으로 완성된 텍스트. 일반 글자로 교체해도 됩니다.
  $target.textContent = text
})