← 返回导航

数字滚动

animations
0

关键点

  • 数字滚动效果通过 JS 逐步更新数值,配合 requestAnimationFrame 实现流畅动画
  • 使用 requestAnimationFrame 而不是 setInterval,与浏览器刷新频率同步更流畅
  • 计算每帧的增量值,根据总时长和目标值均匀分配,确保按时完成
  • 可用 easeOut 缓动函数让数字滚动先快后慢,最后停在目标值更自然
  • 小数位数控制通过 toFixed() 实现,整数则 Math.floorMath.round

效果说明

数字从 0 平滑滚动到目标值。用 requestAnimationFrame 驱动,按时间进度计算当前值,配合 easeOutCubic 缓动函数让滚动先快后慢,最终精准停在目标值。常用于数据看板、KPI 卡片的入场展示,比静态数字更有"数据感"。

CSS
JavaScript