封装数字滚动动画函数

全栈练习生2026-04-06 13:58

数字滚动动画是一种常见的视觉效果，通常用于展示数据增长或变化的动态过程。通过封装一个通用的数字滚动动画函数，可以方便地在不同项目中复用。

动画函数实现

javascript 复制代码

function animation({from, to, duration, onProgress}) {
    let value = from;
    let startTime = Date.now();
    const speed = (to - from) / duration;
    
    function _run() {
        const t = Date.now() - startTime
        if (t >= duration) {
            value = to;
            onProgress && onProgress();
            return;
        }
        value = from + speed * t;
        onProgress && onProgress();
        requestAnimationFrame(_run);
    }
    _run();
}

函数参数说明

from：动画起始值
to：动画结束值
duration：动画持续时间（毫秒）
onProgress：动画进度回调函数

使用示例

html 复制代码

<script>
animation({
    from: 0,
    to: 100,
    duration: 1000, // 1s
    onProgress(value) {
        numberDom.innerHTML = value
    }
})
</script>

实现原理

动画函数基于requestAnimationFrame实现平滑的动画效果。通过计算当前时间与开始时间的差值，确定动画进度。使用线性插值公式计算当前值：

value = from + speed * t

其中speed为变化速率，由总变化量除以持续时间计算得出。当动画时间超过设定时长时，直接设置为最终值并结束动画。

优化方向

可以增加缓动函数支持，实现更丰富的动画效果。常见的缓动函数包括二次方缓动、三次方缓动、弹性缓动等。也可以添加暂停、继续等控制功能，增强动画的交互性。

参考文献

封装动画函数 # JavaScript # 前端开发工程师 # 编程 # 程序员 # web前端复制此链接，打开Dou音搜索，直接观看视频！