MotionNumber · MotionText

Skaičius, kurio skaitmenys sukasi kaip ratukai, įskaitant atsirandančius ar išnykstančius skaitmenis.

ŽiniatinklisReact NativeSkaičiai ir tekstas

Išbandykite

Ruošiamas pavyzdys…

JavaScript išjungtas. Žemiau esantis kodas yra visas pavyzdys.

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

Trumpiausias naudojimas

Total.jsx

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

Ką jis sutvarko už jus

Perkėlimai: 999 → 1,000 kiekvieną pasikeitusį skaitmenį suka ta pačia kryptimi, kaip ridos skaitiklis.
Atsirandantys ar išnykstantys skaitmenys įsisuka į savo stulpelį ar išsisuka iš jo, užuot staiga iššokę.
Skyrikliai, ženklai ir valiutų simboliai išryškėja ir išblunka kartu su skaitmeniu, kuriam priklauso.
Likę skaitmenys sukdamiesi nuslenka į naujas vietas, todėl skaičius niekada nesuskyla.
Nauja reikšmė judesio viduryje tęsiasi tiksliai nuo to, kas yra ekrane.
Formatavimui niekada nereikia Intl: perduokite tekstą ar format funkciją arba įjunkite su intl.

Naudokite jį

Krepšelio suma, kuri keičiasi pridedant prekes.
Gyvas skaitiklis ar rezultatas.
Prietaisų skydelio skaičius, atsinaujinantis kas kelias sekundes.

Props

`MotionNumber`

Prop	Tipas	Numatytoji	Aprašymas
`value`	`number \| bigint \| string`	`—`privaloma	Skaičius arba kviečiančiojo suformatuotas skaitinis tekstas.
`mode`	`'replace' \| 'roll'`	`'replace'`	`replace` kiekvieną pasikeitusį skaitmenį perkelia vienu žingsniu; `roll` pereina per tarpinius skaitmenis.
`direction`	`'auto' \| 'digit' \| 'up' \| 'down'`	`'auto'`	`auto` seka dydžio pokytį, kad perkėlimai suktųsi viena kryptimi; `digit` kiekvieną skaitmenį lygina atskirai.
`stagger`	`number`	`45`	Milisekundės tarp pasikeitusių skaitmenų, nuo vienetų į išorę. Visa banga yra ribota.
`format`	`(value) => string \| Intl.NumberFormatOptions`		Funkcija, grąžinanti rodomą tekstą, arba `Intl.NumberFormat` parinktys (su `intl`).
`intl`	`boolean`	`false`	Naudoti integruotą `Intl.NumberFormat`. Pagal numatymą išjungta, kad jokiai vykdymo aplinkai nereikėtų `Intl`.
`locale`	`string \| string[]`		Lokalė `intl`.
`prefix`	`string`		Tekstas prieš skaičių.
`suffix`	`string`		Tekstas po skaičiaus.
`transition`	`Transition`	`spring`	Timing kreivė `{ duration, easing }` arba spyruoklė `{ tempo: 'spring', spring }`. Pertrauktos spyruoklės išlaiko inerciją.
`onMotionComplete`	`(value) => void`		Vykdomas su reikšme, kai skaitmenys nusistovi.

`MotionText`

Prop	Tipas	Numatytoji	Aprašymas
`children`	`ReactNode`		Rodomas tekstas.
`as`	`element`	`'span'`	Atvaizduojamas elementas.
`transition`	`Transition`	`spring`	Timing kreivė `{ duration, easing }` arba spyruoklė `{ tempo: 'spring', spring }`. Pertrauktos spyruoklės išlaiko inerciją.
`onMotionComplete`	`(text) => void`		Vykdomas, kai judesys nusistovi.

Kiti props perduodami atvaizduojamam elementui, todėl className, style ir įvykių apdorojimo funkcijos veikia kaip įprastai.

Žiniatinklis ir React Native

Žiniatinklyje kiekvienas skaitmuo yra maža glifų krūvelė, kurią groja Web Animations API, o tekstas lieka pažymimas. MotionText animuoja bet kokį tekstą: skaitinis tekstas sukasi pagal skaitmenis, kitas tekstas pakeičiamas.

React Native skaičius lieka tikru Text išdėstymui, pažymėjimui ir prieinamumui, įskaitant eilučių kėlimą ir numberOfLines; glifai juda su vietiniu driver.