MotionStream

Κείμενο σε ροή που εμφανίζεται με σταθερό ρυθμό και προλαβαίνει τις ριπές.

WebReact NativeΑριθμοί και κείμενο

Δοκιμάστε το

Προετοιμασία παραδείγματος…

Η JavaScript είναι απενεργοποιημένη. Ο κώδικας παρακάτω είναι το πλήρες παράδειγμα.

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;
}

Η πιο σύντομη χρήση

Answer.jsx

<MotionStream text={answerSoFar} initial />

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

Τι αναλαμβάνει για εσάς

Οι ριπές γίνονται ανάγνωση: το κείμενο εμφανίζεται με speed χαρακτήρες το δευτερόλεπτο αντί για κομμάτια.
Μια καθυστέρηση επιταχύνει την εμφάνιση ώστε να φανεί μέσα σε περίπου catchUp χιλιοστά του δευτερολέπτου.
Τα emoji, οι σημαίες και τα συνδυαστικά σημάδια δεν διασπώνται ποτέ, και ένα emoji που έφτασε μισό περιμένει το υπόλοιπο.
Μια απάντηση που ξαναγράφεται συνεχίζει από την κοινή αρχή αντί να ξεκινά από την αρχή.
Οι χαρακτήρες που εμφανίζονται πηγαίνουν κατευθείαν στη σελίδα· το React αποδίδει μόνο λίγες φορές το δευτερόλεπτο.

Χρησιμοποιήστε το για

Η απάντηση ενός βοηθού σε συνομιλία.
Ένα αρχείο καταγραφής build ή deploy.
Ζωντανοί υπότιτλοι.

Props

Prop	Τύπος	Προεπιλογή	Περιγραφή
`text`	`string`	`—`υποχρεωτικό	Το κείμενο ως τώρα. Το κείμενο που μεγαλώνει εμφανίζεται με σταθερό ρυθμό· μια επανεγγραφή συνεχίζει από την κοινή αρχή.
`speed`	`number`	`90`	Βασικός ρυθμός εμφάνισης σε χαρακτήρες το δευτερόλεπτο.
`catchUp`	`number`	`900`	Μια καθυστέρηση εμφανίζεται με επιτάχυνση μέσα σε περίπου τόσα χιλιοστά του δευτερολέπτου.
`initial`	`boolean`	`false`	Εμφάνιση σταδιακά και του κειμένου που υπάρχει κατά την προσάρτηση (αλλιώς φαίνεται αμέσως).
`effect`	`'fade' \| 'none'`	`'fade'`	Το `fade` εμφανίζει σταδιακά τους νέους χαρακτήρες· το `none` τους δείχνει απευθείας.
`children`	`(visible: string) => ReactNode`		Συνάρτηση που λαμβάνει το ρυθμισμένο κείμενο, για παράδειγμα για απόδοση Markdown.
`as`	`element`	`'span'`	Το στοιχείο προς απόδοση.
`onMotionComplete`	`(text) => void`		Εκτελείται κάθε φορά που η εμφάνιση προλαβαίνει το `text`.

Τα υπόλοιπα props πηγαίνουν στο στοιχείο που αποδίδεται, οπότε τα className, style και οι χειριστές συμβάντων λειτουργούν κανονικά.

Web και React Native

Στο web οι νέοι χαρακτήρες εμφανίζονται σταδιακά (effect="fade") και ενσωματώνονται σε απλό, επιλέξιμο κείμενο. Ένα παιδί-συνάρτηση λαμβάνει τη ρυθμισμένη συμβολοσειρά για Markdown, το πολύ κάθε δεύτερο καρέ. Σε κρυφή καρτέλα όλα εμφανίζονται μονομιάς.

Στο React Native το κείμενο είναι πραγματικό Text και εμφανίζεται χωρίς σβήσιμο.

Χρησιμοποιείται σε αυτά τα παραδείγματα

Απάντηση σε συνομιλίαΠροτάσεις που διπλώνουν, μια απάντηση σε ροή με σταθερό ρυθμό και μια γραμμή κατάστασης που εναλλάσσεται.MotionStreamMotionListMotionSwapMotionHeight