js数字变动效果

1.定时器

        //数字变化效果
        numberChange() {
            let timerId;
            // 清除之前的定时器，以防重复启动
            if (timerId) {
                clearInterval(timerId);
            }
            // 设置新的定时器
            timerId = setInterval(() => {
                this.animation(970, 10, 97, (val) => {
                    //this.count要展示的数字
                    this.count = val.toFixed(0);
                });
            }, 5000); // 每0.1秒执行一次
        },

2.设置数字变动

animation(duration, from, to, onProgress) {
            let value = from;
            const start = Date.now();
            // 变化速度
            const speed = (to - from) / duration;
            // _run函数：让value一点一点变化
            function _run() {
                // 1、改变value的值
                const t = Date.now() - start;
                if (t >= duration) {
                    value = to;
                    onProgress(value);
                    return;
                }
                value = from + t * speed;
                onProgress(value);
                // 2、注册下一次的变化
                requestAnimationFrame(_run);
            }
            // 一开始执行
            _run();
        },

3.效果