perf(NumberRoll): 优化数字滚动动画性能和渲染效果

- 使用更平滑的缓动函数 easeOutQuart 替代 easeOutCubic
- 减少不必要的值更新，只在变化明显时更新
- 添加硬件加速优化（translateZ(0)）
- 移除CSS transition，完全由JS控制动画
- 添加文本渲染优化属性

@@ -8,7 +8,10 @@
       <view class="digit-wrapper">
       <view class="digit-wrapper">
         <view
         <view
           class="digit-column"
           class="digit-column"
-          :style="{ transform: `translateY(-${digit.currentValue * 10}%)` }"
+          :style="{ 
+            transform: `translateY(-${digit.currentValue * 10}%) translateZ(0)`,
+            willChange: isAnimating ? 'transform' : 'auto'
+          }"
         >
         >
           <view
           <view
             v-for="num in 10"
             v-for="num in 10"
@@ -115,12 +118,17 @@ const animateDigit = (digit, index) => {
     const elapsed = currentTime - startTime
     const elapsed = currentTime - startTime
     const progress = Math.min(elapsed / props.duration, 1)
     const progress = Math.min(elapsed / props.duration, 1)
 
 
-    // 使用缓动函数
-    const easeProgress = easeOutCubic(progress)
+    // 使用更平滑的缓动函数
+    const easeProgress = easeOutQuart(progress)
 
 
-    // 计算当前值
+    // 计算当前值，使用更精确的计算
     const currentValue = startValue + (endValue - startValue) * easeProgress
     const currentValue = startValue + (endValue - startValue) * easeProgress
-    digit.currentValue = currentValue
+    
+    // 减少不必要的更新，只在值有明显变化时更新
+    const roundedValue = Math.round(currentValue * 100) / 100
+    if (Math.abs(digit.currentValue - roundedValue) > 0.01) {
+      digit.currentValue = roundedValue
+    }
 
 
     if (progress < 1) {
     if (progress < 1) {
       digit.animationId = requestAnimationFrame(animate)
       digit.animationId = requestAnimationFrame(animate)
@@ -133,9 +141,9 @@ const animateDigit = (digit, index) => {
   digit.animationId = requestAnimationFrame(animate)
   digit.animationId = requestAnimationFrame(animate)
 }
 }
 
 
-// 缓动函数
-const easeOutCubic = (t) => {
-  return 1 - Math.pow(1 - t, 3)
+// 更平滑的缓动函数
+const easeOutQuart = (t) => {
+  return 1 - Math.pow(1 - t, 4)
 }
 }
 
 
 // 检查动画是否完成
 // 检查动画是否完成
@@ -239,6 +247,10 @@ defineExpose({
   background: rgba(255, 255, 255, 0.1);
   background: rgba(255, 255, 255, 0.1);
   border-radius: 8rpx;
   border-radius: 8rpx;
   border: 1rpx solid rgba(255, 255, 255, 0.2);
   border: 1rpx solid rgba(255, 255, 255, 0.2);
+  // 启用硬件加速
+  transform: translateZ(0);
+  backface-visibility: hidden;
+  perspective: 1000px;
 }
 }
 
 
 .digit-wrapper {
 .digit-wrapper {
@@ -246,6 +258,8 @@ defineExpose({
   width: 100%;
   width: 100%;
   height: 100%;
   height: 100%;
   overflow: hidden;
   overflow: hidden;
+  // 启用硬件加速
+  transform: translateZ(0);
 }
 }
 
 
 .digit-column {
 .digit-column {
@@ -253,7 +267,11 @@ defineExpose({
   top: 0;
   top: 0;
   left: 0;
   left: 0;
   width: 100%;
   width: 100%;
-  transition: transform 0.1s ease-out;
+  // 移除CSS transition，完全由JS控制动画
+  // transition: transform 0.1s ease-out;
+  // 启用硬件加速和优化
+  transform-style: preserve-3d;
+  backface-visibility: hidden;
 }
 }
 
 
 .digit-item {
 .digit-item {
@@ -266,5 +284,10 @@ defineExpose({
   font-weight: bold;
   font-weight: bold;
   color: #fff;
   color: #fff;
   font-family: 'Courier New', monospace;
   font-family: 'Courier New', monospace;
+  // 文本渲染优化
+  text-rendering: optimizeSpeed;
+  -webkit-font-smoothing: antialiased;
+  // 启用硬件加速
+  transform: translateZ(0);
 }
 }
 </style>
 </style>