MotionNumber · MotionText

Število, katerega mesta se vrtijo kot kolesca, vključno z mesti, ki se pojavijo ali izginejo.

SpletReact NativeŠtevila in besedilo

Preizkusite

Pripravljanje primera …

JavaScript je izklopljen. Koda spodaj je celoten primer.

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

Najkrajša uporaba

Total.jsx

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

Kaj uredi namesto vas

Prenosi: 999 → 1,000 zavrti vsako spremenjeno mesto v isto smer, kot števec kilometrov.
Mesta, ki se pojavijo ali izginejo, se zavrtijo v svoj stolpec ali iz njega, namesto da bi poskočila.
Ločila, predznaki in simboli valut se prikažejo in zbledijo skupaj z mestom, ki mu pripadajo.
Preostala mesta med vrtenjem drsijo na nove položaje, zato se število nikoli ne razcepi.
Nova vrednost sredi gibanja nadaljuje natanko od tistega, kar je na zaslonu.
Oblikovanje nikoli ne zahteva Intl: podajte besedilo ali funkcijo format ali ga izrecno vklopite z intl.

Uporabite jo za

Skupni znesek košarice, ki se spreminja z dodajanjem izdelkov.
Števec ali rezultat v živo.
Številka na nadzorni plošči, ki se osveži vsakih nekaj sekund.

Props

`MotionNumber`

Prop	Tip	Privzeto	Opis
`value`	`number \| bigint \| string`	`—`obvezno	Število ali številsko besedilo, ki ga oblikuje klicatelj.
`mode`	`'replace' \| 'roll'`	`'replace'`	`replace` premakne vsako spremenjeno mesto za en korak; `roll` gre skozi vmesne števke.
`direction`	`'auto' \| 'digit' \| 'up' \| 'down'`	`'auto'`	`auto` sledi spremembi velikosti, da se prenosi vrtijo v eno smer; `digit` primerja vsako mesto posebej.
`stagger`	`number`	`45`	Milisekunde med spremenjenimi mesti, od enic navzven. Celoten val je omejen.
`format`	`(value) => string \| Intl.NumberFormatOptions`		Funkcija, ki vrne besedilo za prikaz, ali možnosti `Intl.NumberFormat` (z `intl`).
`intl`	`boolean`	`false`	Uporabi vgrajeni `Intl.NumberFormat`. Privzeto izklopljeno, da nobeno izvajalno okolje ne potrebuje `Intl`.
`locale`	`string \| string[]`		Jezikovna nastavitev za `intl`.
`prefix`	`string`		Besedilo pred številom.
`suffix`	`string`		Besedilo za številom.
`transition`	`Transition`	`spring`	Krivulja timinga `{ duration, easing }` ali vzmet `{ tempo: 'spring', spring }`. Vzmeti ob prekinitvi ohranijo zagon.
`onMotionComplete`	`(value) => void`		Se izvede z vrednostjo, ko se mesta umirijo.

`MotionText`

Prop	Tip	Privzeto	Opis
`children`	`ReactNode`		Besedilo za prikaz.
`as`	`element`	`'span'`	Element za upodobitev.
`transition`	`Transition`	`spring`	Krivulja timinga `{ duration, easing }` ali vzmet `{ tempo: 'spring', spring }`. Vzmeti ob prekinitvi ohranijo zagon.
`onMotionComplete`	`(text) => void`		Se izvede, ko se gibanje umiri.

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

Splet in React Native

Na spletu je vsako mesto majhen sklad znakov, ki ga predvaja Web Animations API, besedilo pa je mogoče označiti. MotionText animira katero koli besedilo: številsko besedilo se vrti po mestih, drugo besedilo se zamenja.

V React Nativu število ostane pravi Text za postavitev, označevanje in dostopnost, vključno s prelamljanjem in numberOfLines; znaki se premikajo z domorodnim driverjem.