PlAnimateTyping

글자가 하나씩 나타납니다. 문자열 전체는 첫 프레임부터 문서에 있어서, 보지 못하는 사람에게는 아무 비용도 들지 않고 보는 사람에게는 아무것도 reflow시키지 않습니다.

React

import { PlAnimateTyping } from 'plass-ui';

<PlAnimateTyping text="npm install plass-ui" speed={14} hold={1600} erase repeat="infinite" />;

import 'package:plass_ui/plass_ui.dart';

const PlAnimateTyping(
  'flutter pub add plass_ui',
  speed: 14,
  hold: Duration(milliseconds: 1600),
  erase: true,
  repeat: null,
);

Props

Prop	타입	기본값	설명
text	string	—	텍스트. 중첩해 쓰는 것보다 넘기는 편이 쉬울 때. children을 덮어씁니다
speed	number	24	치는 속도(초당 글자 수). 긴 문단과 짧은 문단이 같은 시간이 아니라 같은 속도로 쳐지도록
hold	number	1400	다 친 텍스트를 반복 전에 붙들어 두는 시간(ms)
erase	boolean	false	반복 전에 한 프레임에 지우는 대신 다시 지웁니다. repeat가 한 번을 넘을 때만 뜻이 있습니다
eraseSpeed	number	twice speed	지우는 속도(초당 글자 수). 지우는 것은 보통 치는 것의 두 배쯤 빠릅니다 — 사람이 실제로 그렇게 합니다
caret	boolean	true	텍스트 뒤의 블록
caretChar	ReactNode	'|'	caret을 무엇으로 그릴지
duration공통	number	speed decides	한 번 도는 데 걸리는 시간(ms). CSS 문자열이 아니라 숫자입니다
delay공통	number	0	시작하기까지 기다리는 시간(ms)
repeat공통	number | 'infinite'	1	몇 번 반복할지. 끝없이 돌리려면 Infinity가 아니라 'infinite' — CSS에 그 단어로 그대로 쓰이기 때문입니다
paused공통	boolean	false	있는 자리에 멈춰 세웁니다
trigger공통	'mount' | 'visible' | 'hover' | 'manual'	'mount'	무엇이 시작시키는지. mount는 화면에 올라오자마자, visible은 스크롤되어 보일 때, hover는 포인터나 focus가 닿을 때, manual은 play가 시킬 때만
play공통	boolean	—	trigger가 manual일 때 실행합니다. false → true가 될 때마다 처음부터 다시 돕니다
once공통	boolean	true	trigger="visible"에서 처음 한 번만 돌릴지. 끄면 화면에 다시 들어올 때마다 다시 돕니다
threshold공통	number	0.2	trigger="visible"에서 얼마나 보여야 보이는 것으로 칠지, 0에서 1 사이

Prop	타입	기본값	설명
text *	String	—	칠 텍스트. widget이 아니라 String입니다 — 타자기는 문자열을 grapheme 단위로 드러내고, 링크의 절반을 정직하게 드러낼 방법은 없습니다
speed	double	24	치는 속도(초당 글자 수). 긴 문단과 짧은 문단이 같은 시간이 아니라 같은 속도로 쳐지도록
hold	Duration	Duration(milliseconds: 1400)	다 친 텍스트를 반복 전에 붙들어 두는 시간(ms)
erase	bool	false	반복 전에 한 프레임에 지우는 대신 다시 지웁니다. repeat가 한 번을 넘을 때만 뜻이 있습니다
eraseSpeed	double?	twice speed	지우는 속도(초당 글자 수). 지우는 것은 보통 치는 것의 두 배쯤 빠릅니다 — 사람이 실제로 그렇게 합니다
caret	bool	true	텍스트 뒤의 블록
caretChar	String	'|'	caret을 무엇으로 그릴지
duration공통	Duration?	speed decides	한 번 도는 데 걸리는 시간(ms). CSS 문자열이 아니라 숫자입니다
delay공통	Duration	Duration.zero	시작하기까지 기다리는 시간(ms)
repeat공통	int?	1	몇 번 반복할지. null이 멈추지 않음을 뜻합니다 — 적을 'infinite'가 없고, -1은 찾아봐야 하는 sentinel입니다
paused공통	bool	false	있는 자리에 멈춰 세웁니다
trigger공통	PlassAnimateTrigger	PlassAnimateTrigger.mount	무엇이 시작시키는지. mount는 화면에 올라오자마자, visible은 스크롤되어 보일 때, hover는 포인터나 focus가 닿을 때, manual은 play가 시킬 때만
play공통	bool	false	trigger가 manual일 때 실행합니다. false → true가 될 때마다 처음부터 다시 돕니다
once공통	bool	true	trigger="visible"에서 처음 한 번만 돌릴지. 끄면 화면에 다시 들어올 때마다 다시 돕니다
threshold공통	double	0.2	trigger="visible"에서 얼마나 보여야 보이는 것으로 칠지, 0에서 1 사이

네이티브 <div> 속성은 그대로 통과합니다. 다만 children은 예외로, 그것이 텍스트입니다. render도 easing도 alternate도 없습니다. 컴포넌트가 자기 span 두 개를 있고, 타자기는 곡선을 따라가는 것이 아니라 글자 단위로 나아갑니다.

텍스트는 PlTypography가 데이터를 받는 방식대로 첫 위치 인자이고 평범한 String입니다. 여기에는 펼칠 것이 없습니다. 타자기는 문자열을 grapheme 단위로 드러내므로 입력도 문자열입니다. 그리기는 자기가 놓인 DefaultTextStyle 그대로입니다.

텍스트만 타이핑됩니다. 문자열 하나 또는 여럿을 넘기세요. children 사이의 요소는 자기 텍스트만 보태고 마크업은 아무것도 보태지 않습니다. 링크의 절반을 정직하게 드러낼 방법이 없기 때문입니다.

duration은 문자열 전체에 걸리는 시간으로 해석되고 speed를 덮어씁니다. 여기서 자연스러운 단위는 speed입니다. 긴 문단과 짧은 문단은 같은 시간이 아니라 같은 속도로 쳐져야 하기 때문입니다. 그래서 기본값이 그쪽입니다.

Examples

speed

초당 글자 수입니다. 24 언저리가 사람이 치는 것처럼 읽히고, 10 아래는 기계가 찍는 것, 60 위는 줄이 그냥 나타나는 쪽에 가깝습니다.

React

import { useState } from 'react';
import { PlAnimateTyping, PlButton } from 'plass-ui';

export default function AnimateTypingSpeed() {
  const [run, setRun] = useState(0);

  return (
    <div className="flex flex-col items-center gap-4">
      <PlButton size="sm" variant="glass" color="secondary" onClick={() => setRun(run + 1)}>
        Play again
      </PlButton>

      <div className="flex flex-col gap-2 font-mono">
        {[8, 24, 60].map((speed) => (
          <PlAnimateTyping
            key={`${run}-${speed}`}
            speed={speed}
            text={`${speed} characters a second`}
          />
        ))}
      </div>
    </div>
  );
}

import 'package:flutter/widgets.dart';
import 'package:plass_ui/plass_ui.dart';

class AnimateTypingSpeed extends StatefulWidget {
  const AnimateTypingSpeed({super.key});

  @override
  State<AnimateTypingSpeed> createState() => _AnimateTypingSpeedState();
}

class _AnimateTypingSpeedState extends State<AnimateTypingSpeed> {
  int _run = 0;

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisSize: MainAxisSize.min,
      spacing: 16,
      children: <Widget>[
        PlButton(
          size: PlassSize.sm,
          variant: PlassVariant.glass,
          color: PlassColor.secondary,
          onPressed: () => setState(() => _run += 1),
          child: const Text('Play again'),
        ),
        DefaultTextStyle(
          style: const TextStyle(fontFamily: 'monospace', fontSize: 14),
          child: Column(
            mainAxisSize: MainAxisSize.min,
            crossAxisAlignment: CrossAxisAlignment.start,
            spacing: 4,
            children: <Widget>[
              for (final double speed in <double>[8, 24, 60])
                PlAnimateTyping(
                  '$speed characters a second',
                  key: ValueKey<String>('$_run-$speed'),
                  speed: speed,
                ),
            ],
          ),
        ),
      ],
    );
  }
}

erase

repeat, hold, erase가 이것을 순환으로 만듭니다. 치고, 붙들고, 지우고, 다시 칩니다. erase 없이는 반복이 한 프레임에 지워지는데, 다시 쓰이는 것이 아니라 교체되는 줄에는 그쪽이 맞습니다.

React

import { PlAnimateTyping } from 'plass-ui';

export default function AnimateTypingErase() {
  return (
    <div className="flex flex-col items-center gap-2 font-mono">
      <PlAnimateTyping
        text="rewritten, not replaced"
        speed={18}
        hold={900}
        erase
        repeat="infinite"
      />

      <PlAnimateTyping
        text="replaced in one frame"
        speed={18}
        hold={900}
        repeat="infinite"
        caret={false}
      />
    </div>
  );
}

import 'package:flutter/widgets.dart';
import 'package:plass_ui/plass_ui.dart';

class AnimateTypingErase extends StatelessWidget {
  const AnimateTypingErase({super.key});

  @override
  Widget build(BuildContext context) {
    return const DefaultTextStyle(
      style: TextStyle(fontFamily: 'monospace', fontSize: 14),
      child: Column(
        mainAxisSize: MainAxisSize.min,
        crossAxisAlignment: CrossAxisAlignment.start,
        spacing: 8,
        children: <Widget>[
          PlAnimateTyping(
            'rewritten, not replaced',
            speed: 18,
            hold: Duration(milliseconds: 900),
            erase: true,
            repeat: null,
          ),
          PlAnimateTyping(
            'replaced in one frame',
            speed: 18,
            hold: Duration(milliseconds: 900),
            repeat: null,
            caret: false,
          ),
        ],
      ),
    );
  }
}

Accessibility

• 문자열 전체는 잘려 있는 상자 안에 있고 스크린리더는 그것을 한 번 읽습니다. 애니메이션되는 눈에 보이는 사본은 aria-hidden입니다. 아무도 공연을 끝까지 앉아 있을 필요가 없습니다.
• prefers-reduced-motion에서는 텍스트가 그냥 거기 있습니다. "아무 일도 일어나지 않음"이 아닙니다. 컴포넌트가 담고 있던 것을 그대로 전달하는 유일한 결과입니다.
• 나아가는 단위는 code point가 아니라 grapheme입니다. 👩‍👩‍👧는 읽는 사람에게 한 글자이고 JavaScript에게 code point 일곱 개이며, code point 단위로 나아가는 타자기는 그것을 아무 뜻도 없는 조각들로 조립하는 데 네 프레임을 씁니다.
• 상자는 도착한 글자들로부터 레이아웃되지 않으므로 주변 텍스트가 매 프레임 reflow하지 않습니다. 다만 컨테이너가 허용하는 만큼 넓어지므로, 줄바꿈이 중요하다면 한 줄짜리 효과에는 white-space: nowrap이나 너비를 주세요.

• 문자열 전체가 widget의 접근성 label이고 그려지는 사본은 ExcludeSemantics 뒤에 있습니다. 그래서 스크린리더는 텍스트를 한 번 받고, 공연을 끝까지 앉아 있을 필요가 없습니다.
• 플랫폼에서 애니메이션이 꺼져 있으면(MediaQuery.disableAnimations) 텍스트가 그냥 거기 있습니다. "아무 일도 일어나지 않음"이 아닙니다. widget이 담고 있던 것을 그대로 전달하는 유일한 결과입니다.
• 나아가는 단위는 code point가 아니라 grapheme입니다. 👩‍👩‍👧는 읽는 사람에게 한 글자이고 Dart에게 code point 일곱 개입니다.
• 문자열 전체가 차지할 상자는 첫 프레임부터 잡혀 있어서, 글자가 도착하는 동안 주변의 어떤 것도 다시 레이아웃되지 않습니다.

React 빌드와 다른 점

React	Flutter	이유
text 또는 children을 문자열로 펼침	위치 인자 String 하나	펼칠 것이 없습니다. 타자기의 입력은 텍스트이므로 텍스트를 받습니다.
스크린리더용 잘린 사본 + aria-hidden인 보이는 사본	ExcludeSemantics 위의 Semantics(label:)	같은 두 가지 일을 노드 하나 덜 써서 합니다.
도착한 글자로 상자를 레이아웃하지 않음	전체 문자열을 부분 문자열 아래에 보이지 않게 그림	Flutter의 Text는 담고 있는 것으로 레이아웃되므로, 전체 문자열을 담은 무언가가 자리를 잡아 주어야 합니다.
Intl.Segmenter	String.characters	둘 다 grapheme의 끝을 압니다. 이쪽은 프레임워크와 함께 옵니다.
duration, delay가 밀리초	Duration	프레임워크에 이미 타입이 있습니다.
easing이 CSS 문자열	curve, Curve	같은 것에 대한 Dart 자신의 이름입니다.
repeat: number | 'infinite'	int?, null이 멈추지 않음	적을 'infinite'가 없고, -1은 caller가 찾아봐야 하는 sentinel입니다.
trigger="visible"이 IntersectionObserver	가장 가까운 Scrollable을 봅니다	여기에는 observer가 없습니다. 위에 scrollable이 없으면 볼 것이 없으므로 그냥 돕니다.
prefers-reduced-motion	MediaQuery.disableAnimations	플랫폼 자신의 신호입니다.
className, style	—	통과시킬 class 목록도 style 속성도 없습니다.