MotionNumber · MotionText

Číslo, jehož řády se točí jako kolečka, včetně řádů, které se objevují nebo mizí.

WebReact NativeČísla a text

Vyzkoušejte

Příprava příkladu…

JavaScript je vypnutý. Kód níže je celý pří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;
}

Nejkratší použití

Total.jsx

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

Co za vás vyřeší

Přenosy: 999 → 1,000 protočí každý změněný řád stejným směrem, jako tachometr.
Řády, které se objevují nebo mizí, vrolují či vyrolují ve vlastním sloupci, místo aby vyskočily.
Oddělovače, znaménka a symboly měn se objevují a mizí s řádem, ke kterému patří.
Zbývající řády při rolování klouzají na nová místa, takže se číslo nikdy nerozpadne.
Nová hodnota uprostřed pohybu pokračuje přesně od toho, co je na obrazovce.
Formátování nikdy nevyžaduje Intl: předejte text nebo funkci format, případně zapněte intl.

Použijte pro

Součet košíku, který se mění s přidáváním položek.
Živé počítadlo nebo skóre.
Údaj na dashboardu, který se obnovuje každých pár sekund.

Props

`MotionNumber`

Prop	Typ	Výchozí	Popis
`value`	`number \| bigint \| string`	`—`povinné	Číslo nebo číselný text, který jste naformátovali.
`mode`	`'replace' \| 'roll'`	`'replace'`	`replace` posune každý změněný řád o jeden krok; `roll` projde číslicemi mezi.
`direction`	`'auto' \| 'digit' \| 'up' \| 'down'`	`'auto'`	`auto` sleduje změnu velikosti, takže přenosy rolují jedním směrem; `digit` porovnává každý řád zvlášť.
`stagger`	`number`	`45`	Milisekundy mezi změněnými řády, od jednotek ven. Celá vlna je časově omezená.
`format`	`(value) => string \| Intl.NumberFormatOptions`		Funkce vracející text k zobrazení, nebo volby `Intl.NumberFormat` (s `intl`).
`intl`	`boolean`	`false`	Použít vestavěný `Intl.NumberFormat`. Ve výchozím stavu vypnuto, aby žádné běhové prostředí `Intl` nepotřebovalo.
`locale`	`string \| string[]`		Locale pro `intl`.
`prefix`	`string`		Text před číslem.
`suffix`	`string`		Text za číslem.
`transition`	`Transition`	`spring`	Křivka timing `{ duration, easing }` nebo pružina `{ tempo: 'spring', spring }`. Pružiny si při přerušení zachovávají hybnost.
`onMotionComplete`	`(value) => void`		Spustí se s hodnotou, když řády dosednou.

`MotionText`

Prop	Typ	Výchozí	Popis
`children`	`ReactNode`		Text k zobrazení.
`as`	`element`	`'span'`	Prvek, který se renderuje.
`transition`	`Transition`	`spring`	Křivka timing `{ duration, easing }` nebo pružina `{ tempo: 'spring', spring }`. Pružiny si při přerušení zachovávají hybnost.
`onMotionComplete`	`(text) => void`		Spustí se, když pohyb dosedne.

Ostatní props jdou do renderovaného prvku, takže className, style a obsluhy událostí fungují jako obvykle.

Web a React Native

Na webu je každý řád malým sloupcem glyfů přehrávaným přes Web Animations API a text zůstává označitelný. MotionText animuje jakýkoli text: číselný text roluje po řádech, ostatní se vymění.

V React Native zůstává číslo skutečným Text pro rozvržení, označování i přístupnost, včetně zalamování a numberOfLines; glyfy se pohybují na nativním driveru.