Остановка и запуск анимации после нажатия на кнопку (Javascript)

Question

Привет :) Я создал и анимировал свой собственный индикатор выполнения для простого проигрывателя musi c, который я делаю. Теперь я хочу знать, возможно ли запустить и приостановить эту анимацию с помощью тех же кнопок, которые используются для воспроизведения и паузы аудиофайла. Пример кода:

<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, необходимый для анимации / остановки анимации

Надеюсь, это поможет!