feat: 添加NumberTicker组件

Author: Ohh-889

src/components/NumberTicker.tsx

@@ -0,0 +1,105 @@
+import clsx from 'clsx';
+import type { AnimationPlaybackControls } from 'motion/react';
+import { animate, useInView, useMotionValue, useSpring } from 'motion/react';
+import type { ComponentPropsWithoutRef } from 'react';
+import { useEffect, useRef } from 'react';
+
+interface NumberTickerProps extends ComponentPropsWithoutRef<'span'> {
+  /** - 小数位数 */
+  decimalPlaces?: number;
+  /** - 延时时间 单位：秒 */
+  delay?: number;
+  /** - 动画方向 */
+  direction?: 'down' | 'up';
+  /** - 动画时长 单位：秒 如果不指定 则使用spring动画 更为自然地过渡 */
+  duration?: number;
+  /** - 前缀 */
+  prefix?: string;
+  /** - 起始值 */
+  startValue?: number;
+  /** - 后缀 */
+  suffix?: string;
+  /** - 目标值 */
+  value: number;
+}
+
+const NumberTicker = ({
+  className,
+  decimalPlaces = 0,
+  delay = 0,
+  direction = 'up',
+  duration,
+  prefix = '',
+  startValue = 0,
+  suffix = '',
+  value,
+  ...props
+}: NumberTickerProps) => {
+  const ref = useRef<HTMLSpanElement>(null);
+
+  const endValue = direction === 'down' ? 0 : value;
+
+  const motionValue = useMotionValue(direction === 'down' ? value : 0);
+
+  const isInView = useInView(ref, { margin: '0px', once: true });
+
+  const springValue = useSpring(motionValue, {
+    damping: 60,
+    stiffness: 100
+  });
+
+  function updateTextContent(latest: number) {
+    if (!ref.current) return;
+
+    const formattedNumber = Intl.NumberFormat('en-US', {
+      maximumFractionDigits: decimalPlaces,
+      minimumFractionDigits: decimalPlaces
+    }).format(Number(latest.toFixed(decimalPlaces)));
+    ref.current.textContent = `${prefix} ${formattedNumber} ${suffix}`;
+  }
+
+  useEffect(() => {
+    // eslint-disable-next-line @typescript-eslint/no-unused-expressions
+    isInView &&
+      setTimeout(() => {
+        motionValue.set(endValue);
+      }, delay * 1000);
+  }, [motionValue, isInView, delay, endValue]);
+
+  useEffect(() => {
+    let animation: AnimationPlaybackControls;
+    if (duration) {
+      animation = animate(
+        motionValue.get(), // 起始值
+        endValue, // 目标值
+        {
+          duration, // 动画时长（秒）
+          onUpdate: latest => {
+            // 更新 motionValue（可选：如果后续还有依赖该值的逻辑）
+            motionValue.set(latest);
+
+            updateTextContent(latest);
+          }
+        }
+      );
+    } else {
+      springValue.on('change', latest => {
+        updateTextContent(latest);
+      });
+    }
+    return () => animation?.cancel();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [motionValue, springValue, endValue, duration]);
+
+  return (
+    <span
+      className={clsx('inline-block tabular-nums tracking-wider text-white dark:text-dark', className)}
+      ref={ref}
+      {...props}
+    >
+      {prefix} {startValue} {suffix}
+    </span>
+  );
+};
+
+export default NumberTicker;