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 மாறிய ஒவ்வொரு இலக்கத்தையும் odometer போல ஒரே திசையில் உருட்டுகிறது.
தோன்றும் அல்லது மறையும் இலக்கங்கள் திடீரென்று தோன்றாமல் தங்கள் சொந்த நெடுவரிசையில் உருண்டு வருகின்றன அல்லது செல்கின்றன.
பிரிப்பான்கள், குறிகள், நாணயக் குறியீடுகள் அவை சேர்ந்த இலக்கத்துடன் மங்கித் தோன்றி மறைகின்றன.
மீதமுள்ள இலக்கங்கள் உருளும்போதே புதிய நிலைகளுக்கு நகர்கின்றன; அதனால் எண் ஒருபோதும் பிளவுபடுவதில்லை.
மோஷனின் நடுவில் வரும் புதிய மதிப்பு திரையில் தெரிவதிலிருந்து சரியாகத் தொடர்கிறது.
வடிவமைப்புக்கு 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`-க்கான locale.
`prefix`	`string`		எண்ணுக்கு முன் உள்ள உரை.
`suffix`	`string`		எண்ணுக்குப் பின் உள்ள உரை.
`transition`	`Transition`	`spring`	நேர வளைவு `{ duration, easing }` அல்லது spring `{ tempo: 'spring', spring }`. spring-கள் இடைமறிக்கப்படும்போது தங்கள் உந்தத்தை வைத்திருக்கின்றன.
`onMotionComplete`	`(value) => void`		இலக்கங்கள் அமைந்ததும் மதிப்புடன் இயங்குகிறது.

`MotionText`

Prop	வகை	இயல்புநிலை	விளக்கம்
`children`	`ReactNode`		காட்ட வேண்டிய உரை.
`as`	`element`	`'span'`	ரெண்டர் செய்ய வேண்டிய உறுப்பு.
`transition`	`Transition`	`spring`	நேர வளைவு `{ duration, easing }` அல்லது spring `{ tempo: 'spring', spring }`. spring-கள் இடைமறிக்கப்படும்போது தங்கள் உந்தத்தை வைத்திருக்கின்றன.
`onMotionComplete`	`(text) => void`		மோஷன் அமையும்போது இயங்குகிறது.

மற்ற props ரெண்டர் ஆகும் உறுப்புக்குச் செல்கின்றன; அதனால் className, style, நிகழ்வுக் கையாளிகள் வழக்கம்போல் இயங்குகின்றன.

வலையும் React Native-உம்

வலையில் ஒவ்வொரு இலக்கமும் Web Animations API இயக்கும் சிறிய glyph அடுக்கு; உரை தேர்ந்தெடுக்கக்கூடியதாகவே இருக்கிறது. MotionText எந்த உரையையும் அனிமேட் செய்கிறது: எண் உரை இலக்கவாரியாக உருள்கிறது, மற்ற உரை மாற்றப்படுகிறது.

React Native-இல் எண், மடிப்பு, numberOfLines உட்பட, லேஅவுட், தேர்வு, அணுகல்தன்மைக்காக உண்மையான Text ஆகவே இருக்கிறது; glyph-கள் நேட்டிவ் driver-இல் நகர்கின்றன.