Web前端之封装动画函数、requestAnimationFrame、toFixed

---

效果图

---

Html

<div style="text-align: center; font-size: 68px;">
    <div>
        <button onclick="init()" style="font-size: 50px;">初始化</button>

        <button onclick="handleBtn()" style="font-size: 50px;">打 折</button>
    </div>

    <div>
        <label></label>
    </div>
</div>

---

JavaScript

const label = document.querySelector('label');

function init() {
    let originVal = 5000.00;

    label.textContent = originVal.toFixed(2);
}

init();

function handleBtn() {
    animation(1000, 5000, 50, (val) => {
        label.textContent = val.toFixed(2);
    });
}

function animation(duration, from, to, onProgress) {
    const speed = (to - from) / duration;
    const startTime = Date.now();
    let value = from;

    function _run() {
        const now = Date.now();
        const time = now - startTime;

        if (time >= duration) {
            value = to;
            onProgress && onProgress(value);

            return false;
        }

        value = from + speed * time;
        onProgress && onProgress(value);
        requestAnimationFrame(_run);
    }

    _run();
}

---

requestAnimationFrame

MDN

window.requestAnimationFrame()告诉浏览器——你希望执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。该方法需要传入一个回调函数作为参数，该回调函数会在浏览器下一次重绘之前执行。
备注：若你想在浏览器下次重绘之前继续更新下一帧动画，那么回调函数自身必须再次调用requestAnimationFrame()。requestAnimationFrame()是一次性的。
当你准备更新在屏动画时你应该调用此方法。这将使浏览器在下一次重绘之前调用你传入给该方法的动画函数(即你的回调函数)。回调函数执行次数通常是每秒60次，但在大多数遵循W3C建议的浏览器中，回调函数执行次数通常与浏览器屏幕刷新次数相匹配。为了提高性能和电池寿命，在大多数浏览器里，当requestAnimationFrame()运行在后台标签页或者隐藏的<iframe>里时，requestAnimationFrame()会被暂停调用以提升性能和电池寿命。
DOMHighResTimeStamp参数会传入回调方法中，它指示当前被requestAnimationFrame()排序的回调函数被触发的时间。在同一个帧中的多个回调函数，它们每一个都会接受到一个相同的时间戳，即使在计算上一个回调函数的工作负载期间已经消耗了一些时间。该时间戳是一个十进制数，单位为毫秒，最小精度为1ms(1000μs)。
警告：请确保总是使用第一个参数(或其他一些获取当前时间的方法)来计算动画在一帧中的进度，否则动画在高刷新率的屏幕中会运行得更快。请参考下面示例的做法。
requestAnimationFrame(callback);

---

toFixed

MDN

Number值的toFixed()方法使用定点表示法来格式化该数值。

---

W3SCHOOL

toFixed()方法将数字转换为字符串。
toFixed()方法将字符串四舍五入为指定的小数位数。
注释：如果小数位数高于数字，则添加零。