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` ಗಾಗಿ 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 ಮೇಲೆ ಚಲಿಸುತ್ತವೆ.