MotionNumber · MotionText

Число, чиито разряди се въртят като колелца, включително разряди, които се появяват или изчезват.

УебReact NativeЧисла и текст

Опитайте

Подготовка на примера…

JavaScript е изключен. Кодът по-долу е пълният пример.

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

Най-кратка употреба

Total.jsx

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

С какво се справя вместо вас

Пренос: 999 → 1,000 превърта всеки променен разряд в една и съща посока, като километраж.
Разряди, които се появяват или изчезват, се превъртат в или извън собствената си колона, вместо да изскачат.
Разделители, знаци и символи на валути се появяват и изчезват заедно с разряда, към който принадлежат.
Оставащите разряди се плъзгат към новите си позиции, докато се превъртат, така че числото никога не се разпада.
Нова стойност по средата на движение продължава точно от това, което е на екрана.
Форматирането никога не изисква Intl: подайте текст или функция format, или включете intl.

Подходящ за

Сума на количката, която се променя с добавянето на артикули.
Брояч или резултат на живо.
Показател на табло, който се опреснява на няколко секунди.

Props

`MotionNumber`

Prop	Тип	По подразбиране	Описание
`value`	`number \| bigint \| string`	`—`задължително	Числото или числов текст, форматиран от вас.
`mode`	`'replace' \| 'roll'`	`'replace'`	`replace` мести всеки променен разряд с една стъпка; `roll` минава през цифрите между тях.
`direction`	`'auto' \| 'digit' \| 'up' \| 'down'`	`'auto'`	`auto` следва промяната на големината, така че преносите се превъртат в една посока; `digit` сравнява всеки разряд поотделно.
`stagger`	`number`	`45`	Милисекунди между променените разряди, от единиците навън. Цялата вълна е ограничена във времето.
`format`	`(value) => string \| Intl.NumberFormatOptions`		Функция, която връща текста за показване, или опции на `Intl.NumberFormat` (с `intl`).
`intl`	`boolean`	`false`	Използвай вградения `Intl.NumberFormat`. Изключено по подразбиране, за да не се нуждае никоя среда от `Intl`.
`locale`	`string \| string[]`		Локал за `intl`.
`prefix`	`string`		Текст преди числото.
`suffix`	`string`		Текст след числото.
`transition`	`Transition`	`spring`	Крива на timing `{ duration, easing }` или пружина `{ tempo: 'spring', spring }`. Пружините запазват инерцията си при прекъсване.
`onMotionComplete`	`(value) => void`		Изпълнява се със стойността, след като разрядите спрат.

`MotionText`

Prop	Тип	По подразбиране	Описание
`children`	`ReactNode`		Текстът за показване.
`as`	`element`	`'span'`	Елементът за рендериране.
`transition`	`Transition`	`spring`	Крива на timing `{ duration, easing }` или пружина `{ tempo: 'spring', spring }`. Пружините запазват инерцията си при прекъсване.
`onMotionComplete`	`(text) => void`		Изпълнява се, когато движението спре.

Другите props отиват към рендерирания елемент, така че className, style и обработчиците на събития работят както обикновено.

Уеб и React Native

В уеб всеки разряд е малък стълб от глифове, възпроизвеждан от Web Animations API, а текстът остава маркируем. MotionText анимира всякакъв текст: числовият се превърта по разряди, а другият се сменя.

В React Native числото остава истински Text за оформление, маркиране и достъпност, включително пренасяне и numberOfLines; глифовете се движат на нативния драйвер.