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 ส่วนกลีฟเคลื่อนที่ด้วย native driver