1. 需求
给你一个数字，当这个数字变化时，有一个动画的过渡效果。
2. 思路
首先我们要知道两个数字变化需要多少秒，然后变化的范围，算出变化的速度。记住开始变化的时间，然后通过 requestAnimationFrame 函数，确定事件下一帧执行。
3. 效果
4. 代码实现
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width" /> <title>document</title> <style></style> </head> <body> <button class="btn">打折</button> <label>价格：4599.00</label> <script> const label = document.querySelector("label"); const btn = document.querySelector(".btn"); function animation(duration, from, to, callback) { let value = from; const speed = (to - from) / duration; const start = Date.now(); function _run() { const t = Date.now() - start; if (t >= duration) { value = to; callback(value); return; } value = from + t * speed; callback(value); requestAnimationFrame(_run); } _run(); } btn.onclick = function () { animation(2000, 4599, 30, (value) => { label.textContent = `价格：${value.toFixed(2)}`; }); }; </script> </body> </html>
