如何使动画进度条连续？

Question

我有一个与倒数计时器关联的动画进度条。

目前，进度条的 animation 是离散的。

如何在不更改代码中其他逻辑的情况下使其保持连续？

此外，是否可以使用requestAnimationFrame （如创建动画进度条的方式）而不是当前的setInterval创建计时器？

 var timer = null; var progress_bar = null; var timePassed; var TIME_LIMIT; var timeLeft; function startTimerAndProgressbar() { timePassed = 0; TIME_LIMIT = 10; timeLeft = TIME_LIMIT; startTimer(); id("progress-bar").style.visibility = "visible"; progress_bar = requestAnimationFrame(updateProgressBar); } function pauseTimerAndProgressbar() { clearInterval(timer); pauseProgressBar(); id("pause-btn").disabled = true; id("resume-btn").disabled = false; } function resumeTimerAndProgressbar() { startTimer(); resumeProgressBar(); id("pause-btn").disabled = false; id("resume-btn").disabled = true; } /* HELPER FUNCTION */ function id(id) { return document.getElementById(id); } /* PROGRESS BAR */ function updateProgressBar() { var timeFraction = timeLeft / TIME_LIMIT; id("progress-bar-inner").style.width = timeFraction * 100 + "%"; progress_bar = requestAnimationFrame(updateProgressBar); if (id("progress-bar-inner").style.width <= 0) { pauseProgressBar(); } } function pauseProgressBar() { cancelAnimationFrame(progress_bar); } function resumeProgressBar() { progress_bar = requestAnimationFrame(updateProgressBar); } /* TIMER */ function startTimer() { id("timer").textContent = formatTime(timeLeft); timer = setInterval(function() { timePassed = timePassed += 1; timeLeft = TIME_LIMIT - timePassed; id("timer").textContent = formatTime(timeLeft); if (timeLeft == 0) { clearInterval(timer); } }, 1000); } function formatTime(time) { var m = Math.floor(time / 60); var s = time % 60; m = (m < 10)? ("0" + m): m; s = (s < 10)? ("0" + s): s; return `${m}:${s}`; }

 #timer { font-size: 25px; font-weight: bold; } #progress-bar { visibility: hidden; width: 100%; margin: 25px auto; border: solid 1px #000; border-radius: 10px; } #progress-bar-inner { height: 15px; border-radius: 10px; width: 100%; background-color: orange; }

 <p id="timer"></p> <div id="progress-bar"> <div id="progress-bar-inner"></div> </div> <br> <button onclick="startTimerAndProgressbar()" id="start-btn">Start</button> <button onclick="pauseTimerAndProgressbar()" id="pause-btn">Pause</button> <button onclick="resumeTimerAndProgressbar()" id="resume-btn" disabled>Resume</button>

Answer 1

添加transition: width 1s; 到您的#progress-bar-inner ：

 var timer = null; var progress_bar = null; var timePassed; var TIME_LIMIT; var timeLeft; function startTimerAndProgressbar() { timePassed = 0; TIME_LIMIT = 10; timeLeft = TIME_LIMIT; startTimer(); id("progress-bar").style.visibility = "visible"; progress_bar = requestAnimationFrame(updateProgressBar); } function pauseTimerAndProgressbar() { clearInterval(timer); pauseProgressBar(); id("pause-btn").disabled = true; id("resume-btn").disabled = false; } function resumeTimerAndProgressbar() { startTimer(); resumeProgressBar(); id("pause-btn").disabled = false; id("resume-btn").disabled = true; } /* HELPER FUNCTION */ function id(id) { return document.getElementById(id); } /* PROGRESS BAR */ function updateProgressBar() { var timeFraction = timeLeft / TIME_LIMIT; id("progress-bar-inner").style.width = timeFraction * 100 + "%"; progress_bar = requestAnimationFrame(updateProgressBar); if (id("progress-bar-inner").style.width <= 0) { pauseProgressBar(); } } function pauseProgressBar() { cancelAnimationFrame(progress_bar); } function resumeProgressBar() { progress_bar = requestAnimationFrame(updateProgressBar); } /* TIMER */ function startTimer() { id("timer").textContent = formatTime(timeLeft); timer = setInterval(function() { timePassed = timePassed += 1; timeLeft = TIME_LIMIT - timePassed; id("timer").textContent = formatTime(timeLeft); if (timeLeft == 0) { clearInterval(timer); } }, 1000); } function formatTime(time) { var m = Math.floor(time / 60); var s = time % 60; m = (m < 10)? ("0" + m): m; s = (s < 10)? ("0" + s): s; return `${m}:${s}`; }

 #timer { font-size: 25px; font-weight: bold; } #progress-bar { visibility: hidden; width: 100%; margin: 25px auto; border: solid 1px #000; border-radius: 10px; } #progress-bar-inner { height: 15px; border-radius: 10px; width: 100%; background-color: orange; transition: width 1s; }

 <p id="timer"></p> <div id="progress-bar"> <div id="progress-bar-inner"></div> </div> <br> <button onclick="startTimerAndProgressbar()" id="start-btn">Start</button> <button onclick="pauseTimerAndProgressbar()" id="pause-btn">Pause</button> <button onclick="resumeTimerAndProgressbar()" id="resume-btn" disabled>Resume</button>

Answer 2

您的timer setInterval function 以秒为单位运行。 您需要更改间隔，因此更改TIMELIMIT的值以匹配。

 var timer = null; var progress_bar = null; var timePassed; var TIME_LIMIT; var timeLeft; function startTimerAndProgressbar() { timePassed = 0; TIME_LIMIT = 10; timeLeft = TIME_LIMIT*100; startTimer(); id("progress-bar").style.visibility = "visible"; progress_bar = requestAnimationFrame(updateProgressBar); } function pauseTimerAndProgressbar() { clearInterval(timer); pauseProgressBar(); id("pause-btn").disabled = true; id("resume-btn").disabled = false; } function resumeTimerAndProgressbar() { startTimer(); resumeProgressBar(); id("pause-btn").disabled = false; id("resume-btn").disabled = true; } /* HELPER FUNCTION */ function id(id) { return document.getElementById(id); } /* PROGRESS BAR */ function updateProgressBar() { var timeFraction = timeLeft / (TIME_LIMIT*100); id("progress-bar-inner").style.width = timeFraction * 100 + "%"; progress_bar = requestAnimationFrame(updateProgressBar); if (id("progress-bar-inner").style.width <= 0) { pauseProgressBar(); } } function pauseProgressBar() { cancelAnimationFrame(progress_bar); } function resumeProgressBar() { progress_bar = requestAnimationFrame(updateProgressBar); } /* TIMER */ function startTimer() { id("timer").textContent = formatTime(timeLeft); timer = setInterval(function() { timePassed += 1; timeLeft = TIME_LIMIT*100 - timePassed; id("timer").textContent = formatTime(Math.ceil(timeLeft/100)); if (timeLeft == 0) { clearInterval(timer); } }, 10); } function formatTime(time) { var m = Math.floor(time / 60); var s = time % 60; m = (m < 10)? ("0" + m): m; s = (s < 10)? ("0" + s): s; return `${m}:${s}`; }

 #timer { font-size: 25px; font-weight: bold; } #progress-bar { visibility: hidden; width: 100%; margin: 25px auto; border: solid 1px #000; border-radius: 10px; } #progress-bar-inner { height: 15px; border-radius: 10px; width: 100%; background-color: orange; }

 <p id="timer"></p> <div id="progress-bar"> <div id="progress-bar-inner"></div> </div> <br> <button onclick="startTimerAndProgressbar()" id="start-btn">Start</button> <button onclick="pauseTimerAndProgressbar()" id="pause-btn">Pause</button> <button onclick="resumeTimerAndProgressbar()" id="resume-btn" disabled>Resume</button>