MotionStream

Pretočno besedilo, prikazano v enakomernem tempu, ki dohiti izbruhe.

SpletReact NativeŠtevila in besedilo

Preizkusite

Pripravljanje primera …

JavaScript je izklopljen. Koda spodaj je celoten primer.

App.jsx

import { useEffect, useRef, useState } from 'react';
import { MotionStream } from '@kkwaenggwari/animated-chorus';
import './styles.css';

const answer =
  'Motion helps people follow change. When a total updates, a rolling number shows which way it moved. ' +
  'When a panel opens, the height that follows its content keeps the reader in place. ' +
  'When an answer arrives in bursts, a steady reveal turns the bursts into reading: nothing waits for the ' +
  'next packet, and nothing is dumped at once. The pace speeds up only when a backlog builds, so the text ' +
  'never falls far behind what the server has already sent.';

// Network-like bursts: long pauses, then a lot of text at once.
const pauses = [300, 1100, 250, 1500, 400, 900];

export default function App({ speed = 90, catchUp = 900, chunk = 160, effect = 'fade' }) {
  const [received, setReceived] = useState(0);
  const [chunks, setChunks] = useState(0);
  const renders = useRef(0);
  renders.current += 1;

  useEffect(() => {
    if (received >= answer.length) return;
    const timer = setTimeout(
      () => {
        setReceived((current) => Math.min(answer.length, current + chunk));
        setChunks((count) => count + 1);
      },
      pauses[chunks % pauses.length],
    );
    return () => clearTimeout(timer);
  }, [received, chunks, chunk]);

  const askAgain = () => {
    setReceived(0);
    setChunks(0);
  };

  return (
    <div className="chat">
      <p className="question">Why does motion help an interface?</p>
      <p className="answer">
        <MotionStream
          text={answer.slice(0, received)}
          speed={speed}
          catchUp={catchUp}
          effect={effect}
        />
      </p>
      <footer>
        <output>
          {chunks} chunks · App rendered {renders.current} times
        </output>
        <button onClick={askAgain}>Ask again</button>
      </footer>
    </div>
  );
}

styles.css

.chat {
  display: grid;
  gap: 16px;
  max-width: 620px;
  margin: 0 auto;
  padding: 24px 20px;
}

.question {
  justify-self: end;
  max-width: 80%;
  margin: 0;
  padding: 10px 16px;
  border-radius: 18px 18px 4px 18px;
  background: #176b52;
  color: #fff;
}

.answer {
  min-height: 180px;
  margin: 0;
  padding: 16px 18px;
  border: 1px solid #cfe8dc;
  border-radius: 18px 18px 18px 4px;
  background: #fff;
  color: #16181d;
  line-height: 1.65;
}

footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

output {
  font:
    600 13px ui-monospace,
    Consolas,
    monospace;
  color: #176b52;
}

footer button {
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid #cfe8dc;
  border-radius: 999px;
  background: #fff;
  font:
    600 14px system-ui,
    sans-serif;
  cursor: pointer;
}

Najkrajša uporaba

Answer.jsx

<MotionStream text={answerSoFar} initial />

<MotionStream text={answerSoFar}>
  {visible => <Markdown>{visible}</Markdown>}
</MotionStream>

Kaj uredi namesto vas

Izbruhi postanejo branje: besedilo se prikazuje s hitrostjo speed znakov na sekundo namesto v kosih.
Zaostanek pospeši prikaz, da se pokaže v približno catchUp milisekundah.
Emojiji, zastavice in kombinirajoči znaki se nikoli ne razcepijo, napol prejet emoji pa počaka na preostanek.
Prepisan odgovor nadaljuje od skupnega začetka, namesto da bi začel znova.
Prikazani znaki gredo neposredno na stran; React upodablja le nekajkrat na sekundo.

Uporabite jo za

Odgovor asistenta v klepetu.
Dnevnik gradnje ali uvajanja.
Podnapisi v živo.

Props

Prop	Tip	Privzeto	Opis
`text`	`string`	`—`obvezno	Besedilo do zdaj. Rastoče besedilo se prikazuje v enakomernem tempu; prepis nadaljuje od skupnega začetka.
`speed`	`number`	`90`	Osnovna hitrost prikaza v znakih na sekundo.
`catchUp`	`number`	`900`	Zaostanek se s pospeškom prikaže v približno toliko milisekundah.
`initial`	`boolean`	`false`	Prikaže tudi besedilo, prisotno ob priklopu (sicer se pokaže takoj).
`effect`	`'fade' \| 'none'`	`'fade'`	`fade` postopno prikaže nove znake; `none` jih pokaže neposredno.
`children`	`(visible: string) => ReactNode`		Funkcija, ki prejme odmerjeno besedilo, na primer za upodabljanje Markdowna.
`as`	`element`	`'span'`	Element za upodobitev.
`onMotionComplete`	`(text) => void`		Se izvede vsakič, ko prikaz dohiti `text`.

Druge props gredo upodobljenemu elementu, zato className, style in obravnave dogodkov delujejo kot običajno.

Splet in React Native

Na spletu se novi znaki postopno prikažejo (effect="fade") in se vključijo v navadno besedilo, ki ga je mogoče označiti. Otrok-funkcija prejme odmerjen niz za Markdown, največ vsako drugo sličico. V skritem zavihku se vse pokaže naenkrat.

V React Nativu je besedilo pravi Text in se pojavi brez postopnega prikaza.

Uporabljeno v teh primerih

Odgovor v klepetuPredlogi, ki se strnejo, odgovor, ki priteka v enakomernem tempu, in vrstica stanja, ki se zamenja.MotionStreamMotionListMotionSwapMotionHeight