MotionNumber · MotionText

Číslo, ktorého rády sa točia ako kolieska, vrátane rádov, ktoré sa objavujú alebo miznú.

WebReact NativeČísla a text

Vyskúšajte

Príprava príkladu…

JavaScript je vypnutý. Kód nižšie je celý príklad.

App.jsx

import { useState } from 'react';
import { MotionNumber, MotionText, motionTokens } from '@kkwaenggwari/animated-chorus';
import './styles.css';

const formats = {
  plain: {},
  currency: { intl: true, locale: 'en-US', format: { style: 'currency', currency: 'USD' } },
  // Basis points: every preset and every ±1 step shows a different percentage.
  percent: { format: (value) => `${(value / 100).toFixed(2)}%` },
};

const presets = [9, 10, 999, 1000, 12480, 98765];

export default function App({
  mode = 'roll',
  direction = 'auto',
  format = 'currency',
  stagger = 40,
  spring = 'default',
}) {
  const [value, setValue] = useState(1000);
  const [trend, setTrend] = useState('Ready');

  const change = (next) => {
    setTrend(next > value ? 'Rising' : next < value ? 'Falling' : 'Same value');
    setValue(next);
  };

  return (
    <div className="lab">
      <MotionNumber
        className="value"
        value={value}
        mode={mode}
        direction={direction}
        stagger={stagger}
        transition={motionTokens.spring[spring]}
        {...formats[format]}
      />
      <MotionText className="trend">{trend}</MotionText>
      <div className="presets">
        {presets.map((preset) => (
          <button key={preset} onClick={() => change(preset)}>
            {preset}
          </button>
        ))}
      </div>
      <div className="steps">
        <button onClick={() => change(value - 1)}>−1</button>
        <button onClick={() => change(value + 1)}>+1</button>
        <button onClick={() => change(value * 10)}>×10</button>
        <button onClick={() => change(Math.round(value / 10))}>÷10</button>
      </div>
    </div>
  );
}

styles.css

.lab {
  display: grid;
  justify-items: center;
  gap: 14px;
  padding: 32px 20px 28px;
}

.value {
  font:
    800 clamp(44px, 11vw, 80px)/1.05 system-ui,
    sans-serif;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
  color: #0e2e24;
}

.trend {
  padding: 4px 12px;
  border-radius: 999px;
  background: #eaf6f0;
  color: #176b52;
  font-weight: 650;
  font-size: 14px;
}

.presets,
.steps {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.presets button,
.steps button {
  min-width: 56px;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid #cfe8dc;
  border-radius: 999px;
  background: #fff;
  font:
    600 15px system-ui,
    sans-serif;
  font-variant-numeric: tabular-nums;
  color: #0e2e24;
  cursor: pointer;
}

.steps button {
  background: #f4faf7;
}

.presets button:hover,
.steps button:hover {
  border-color: #176b52;
}

Najkratšie použitie

Total.jsx

<MotionNumber value={count} />
<MotionNumber value={total} mode="roll" intl locale="en-US"
  format={{ style: 'currency', currency: 'USD' }} />
<MotionText>{status}</MotionText>

Čo za vás vyrieši

Prenosy: 999 → 1,000 pretočí každý zmenený rád rovnakým smerom, ako tachometer.
Rády, ktoré sa objavujú alebo miznú, vrolujú či vyrolujú vo vlastnom stĺpci namiesto toho, aby vyskočili.
Oddeľovače, znamienka a symboly mien sa objavujú a miznú s rádom, ku ktorému patria.
Zvyšné rády pri rolovaní kĺžu na nové miesta, takže sa číslo nikdy nerozpadne.
Nová hodnota uprostred pohybu pokračuje presne od toho, čo je na obrazovke.
Formátovanie nikdy nevyžaduje Intl: odovzdajte text alebo funkciu format, prípadne zapnite intl.

Použite na

Súčet košíka, ktorý sa mení s pridávaním položiek.
Živé počítadlo alebo skóre.
Údaj na dashboarde, ktorý sa obnovuje každých pár sekúnd.

Props

`MotionNumber`

Prop	Typ	Predvolené	Popis
`value`	`number \| bigint \| string`	`—`povinné	Číslo alebo číselný text, ktorý ste naformátovali.
`mode`	`'replace' \| 'roll'`	`'replace'`	`replace` posunie každý zmenený rád o jeden krok; `roll` prejde číslicami medzi nimi.
`direction`	`'auto' \| 'digit' \| 'up' \| 'down'`	`'auto'`	`auto` sleduje zmenu veľkosti, takže prenosy rolujú jedným smerom; `digit` porovnáva každý rád zvlášť.
`stagger`	`number`	`45`	Milisekundy medzi zmenenými rádmi, od jednotiek von. Celá vlna je časovo obmedzená.
`format`	`(value) => string \| Intl.NumberFormatOptions`		Funkcia vracajúca text na zobrazenie, alebo voľby `Intl.NumberFormat` (s `intl`).
`intl`	`boolean`	`false`	Použiť vstavaný `Intl.NumberFormat`. Predvolene vypnuté, aby žiadne behové prostredie `Intl` nepotrebovalo.
`locale`	`string \| string[]`		Locale pre `intl`.
`prefix`	`string`		Text pred číslom.
`suffix`	`string`		Text za číslom.
`transition`	`Transition`	`spring`	Krivka timing `{ duration, easing }` alebo pružina `{ tempo: 'spring', spring }`. Pružiny si pri prerušení zachovávajú hybnosť.
`onMotionComplete`	`(value) => void`		Spustí sa s hodnotou, keď rády dosadnú.

`MotionText`

Prop	Typ	Predvolené	Popis
`children`	`ReactNode`		Text na zobrazenie.
`as`	`element`	`'span'`	Prvok, ktorý sa renderuje.
`transition`	`Transition`	`spring`	Krivka timing `{ duration, easing }` alebo pružina `{ tempo: 'spring', spring }`. Pružiny si pri prerušení zachovávajú hybnosť.
`onMotionComplete`	`(text) => void`		Spustí sa, keď pohyb dosadne.

Ostatné props idú do renderovaného prvku, takže className, style a obsluhy udalostí fungujú ako obvykle.

Web a React Native

Na webe je každý rád malým stĺpcom glyfov prehrávaným cez Web Animations API a text zostáva označiteľný. MotionText animuje akýkoľvek text: číselný text roluje po rádoch, ostatný sa vymení.

V React Native zostáva číslo skutočným Text pre rozloženie, označovanie aj prístupnosť, vrátane zalamovania a numberOfLines; glyfy sa pohybujú na natívnom driveri.