按下按鈕后停止和開始動畫（Javascript）

Question

你好 :) 我已經為我正在制作的簡單音樂播放器創建了我自己的進度條並將其動畫化。 現在我想知道是否可以使用用於播放和暫停音頻文件的相同按鈕來啟動和暫停此動畫。 代碼示例：

<div id="progressBar">
    <div id="track"></div>
</div>

<div class="buttons">
    <button><<<</button>
    <button onclick="document.getElementById('music').play()">Play</button>
    <button onclick="document.getElementById('music').pause()">Pause</button>
    <button>>>></button><br>
    <button onclick="document.getElementById('music').volume += 0.1">Vol+</button>
    <button onclick="document.getElementById('music').volume -= 0.1">Vol-</button>
</div>

動畫片：

var val = 0, progressBar, track;

function progressFunc(){

  if(val>100){
    val=0;
  }

  progressBar = document.getElementById('progressBar');
  track = document.getElementById('track');

  track.style.width = val + "%";
  val +=8;

  setTimeout(progressFunc, 1000);
}

 window.addEventListener("load", progressFunc, false);

有人可以幫我解決這個問題嗎？

Answer 1

你非常接近！ 我們所需要的只是一些小的調整：

• 首先，我們將計時器（ setInterval調用）移出動畫函數。 通過這種方式，我們可以更好地控制動畫的內容和方式
• 然后，我們添加一個函數來停止計時器並（可選）將條形重置為其原始狀態
• 最后，我們添加兩個非常簡單的點擊處理程序並將它們附加到按鈕上

把它們放在一起：

let currentValue = 0
let timer = 0

// clickEvent is of type MouseEvent
function playMusic(clickEvent) {
  if (timer) return  // animation is already active

  clickEvent.preventDefault()  // cancel the click event so it does not cause unwanted side effects
  document.getElementById('music').play()
  timer = setInterval(animateBar, 1000)
}

function stopMusic(clickEvent) {
  if (!timer) return  // we already stopped animation

  clickEvent.preventDefault()
  clearInterval(timer)
  timer = 0

  document.getElementById('music').pause()
}

function animateBar() {
  const track = document.getElementById('track')

  if (currentValue > 100) currentValue = 0
  track.style.width = `${currentValue}%`
  currentValue +=8
}

// Attach the event handlers
document.addEventListener("DOMContentLoaded", () => {
  document.getElementById('playButton').addEventListener('click', playMusic) 
  document.getElementById('pauseButton').addEventListener('click', stopMusic) 
}, false);

現在我們只需要稍微調整一下標記

...
    <button id="playButton">Play</button>
    <button id="pauseButton">Pause</button>
...

附帶說明：像這樣的簡單動畫也可以用 CSS 完成，這大大減少和簡化了動畫/停止動畫所需的 JavaScript 代碼

希望這可以幫助！