hookehuyr

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

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