MotionNumber · MotionText

Luku, jonka numeropaikat pyörivät kuin rullat, mukaan lukien ilmestyvät ja katoavat paikat.

WebReact NativeNumerot ja teksti

Kokeile

Valmistellaan esimerkkiä…

JavaScript on pois päältä. Alla oleva koodi on koko esimerkki.

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

Lyhin käyttö

Total.jsx

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

Mitä se hoitaa puolestasi

Muistinumerot: 999 → 1,000 pyörittää jokaista muuttunutta numeropaikkaa samaan suuntaan kuin matkamittari.
Ilmestyvät tai katoavat numeropaikat pyörivät sisään omaan sarakkeeseensa tai sieltä ulos sen sijaan, että ponnahtaisivat.
Erottimet, etumerkit ja valuuttasymbolit häivytetään esiin ja pois yhdessä numeropaikan kanssa, johon ne kuuluvat.
Jäljelle jäävät numeropaikat liukuvat uusiin sijainteihinsa pyöriessään, joten luku ei koskaan hajoa.
Kesken liikkeen tuleva uusi arvo jatkaa tarkalleen siitä, mitä näytöllä on.
Muotoilu ei koskaan vaadi Intl-rajapintaa: anna tekstiä tai format-funktio tai ota se käyttöön intl-asetuksella.

Käytä sitä

Ostoskorin summa, joka muuttuu tuotteita lisättäessä.
Live-laskuri tai -pisteet.
Koontinäytön luku, joka päivittyy muutaman sekunnin välein.

Props

`MotionNumber`

Prop	Tyyppi	Oletus	Kuvaus
`value`	`number \| bigint \| string`	`—`pakollinen	Luku tai kutsujan muotoilema numeerinen teksti.
`mode`	`'replace' \| 'roll'`	`'replace'`	`replace` siirtää jokaista muuttunutta numeropaikkaa yhden askeleen; `roll` kulkee välissä olevien numeroiden kautta.
`direction`	`'auto' \| 'digit' \| 'up' \| 'down'`	`'auto'`	`auto` seuraa suuruuden muutosta, jotta muistinumerot pyörivät yhteen suuntaan; `digit` vertaa jokaista numeropaikkaa erikseen.
`stagger`	`number`	`45`	Millisekunnit muuttuneiden numeropaikkojen välillä ykkösistä ulospäin. Koko aalto on rajattu.
`format`	`(value) => string \| Intl.NumberFormatOptions`		Funktio, joka palauttaa näytettävän tekstin, tai `Intl.NumberFormat`-asetukset (`intl`-asetuksen kanssa).
`intl`	`boolean`	`false`	Käytä sisäänrakennettua `Intl.NumberFormat`-rajapintaa. Oletuksena pois päältä, jotta mikään ajoympäristö ei tarvitse `Intl`-rajapintaa.
`locale`	`string \| string[]`		Lokaali `intl`-asetukselle.
`prefix`	`string`		Teksti ennen lukua.
`suffix`	`string`		Teksti luvun jälkeen.
`transition`	`Transition`	`spring`	Timing-käyrä `{ duration, easing }` tai jousi `{ tempo: 'spring', spring }`. Jouset säilyttävät liikemääränsä keskeytettäessä.
`onMotionComplete`	`(value) => void`		Suoritetaan arvon kanssa, kun numeropaikat ovat asettuneet.

`MotionText`

Prop	Tyyppi	Oletus	Kuvaus
`children`	`ReactNode`		Näytettävä teksti.
`as`	`element`	`'span'`	Renderöitävä elementti.
`transition`	`Transition`	`spring`	Timing-käyrä `{ duration, easing }` tai jousi `{ tempo: 'spring', spring }`. Jouset säilyttävät liikemääränsä keskeytettäessä.
`onMotionComplete`	`(text) => void`		Suoritetaan, kun liike asettuu.

Muut props-arvot menevät renderöidylle elementille, joten className, style ja tapahtumankäsittelijät toimivat tavalliseen tapaan.

Web ja React Native

Webissä jokainen numeropaikka on pieni merkkipino, jonka Web Animations API toistaa, ja teksti pysyy valittavana. MotionText animoi mitä tahansa tekstiä: numeerinen teksti pyörii numeropaikoittain, muu teksti vaihtuu.

React Nativessa luku pysyy oikeana Text-elementtinä asettelua, valintaa ja saavutettavuutta varten, mukaan lukien rivitys ja numberOfLines; merkit liikkuvat natiivilla driverilla.