Кнопка «Пуск» для включения и возобновления анимации без повторения функции при двойном щелчке (javascript)

Question

Кнопка «Пуск» для включения и возобновления анимации без повторения функции при двойном щелчке (javascript)

0

Я создал две кнопки запуска и остановки для моделирования частиц по определенному пути.

<button onclick="start()" id="myButton">Start</button>
<button onclick="stop()">Stop</button>

Когда я нажимаю кнопку запуска, запускается функция анимации, и когда я останавливаюсь, анимация останавливается и снова, когда я нажимаю кнопку "Пуск", она возобновляется с той же позиции, где она останавливается. Моя проблема заключается в том, что когда я нажимаю кнопку запуска при анимации, цикл анимации повторяется и, следовательно, скорость частиц увеличивается каждый раз, когда я нажимаю кнопку запуска.

animate - это функция, которая запускается при нажатии кнопки "Пуск". Я попытался отключить этот атрибут, но полностью отключил кнопку запуска после первого щелчка, но я хочу использовать его для возобновления анимации.

function start() {

  requestId = window.requestAnimationFrame(animate);
 //var disable=document.getElementById("myButton").setAttribute("disabled","disabled");
}

function stop() {
  if (requestId){
        clearTimeout(timeInterval);
    window.cancelAnimationFrame(requestId);
        requestId = 0;
  }
}

Заранее спасибо...

user2928041 13 нояб. 2013, в 15:32

Источник

Теги:

javascript

jquery

html5

css3

html5-canvas

1 ответ

Ещё вопросы

levi · Answer 1 · 2013-11-13T13-05-00.000Z

Сохраните состояние анимации в переменной и убедитесь, что перед запуском анимации:

var running = false;

function start() {
    if (running) {
        return;
    }
    requestId = window.requestAnimationFrame(animate);
    running = true;
}

function stop() {
    if (requestId) {
        clearTimeout(timeInterval);
        window.cancelAnimationFrame(requestId);
        running = false;
        requestId = 0;
    }
}

Я попробовал этот код, но если я нажму кнопку «Стоп», а затем снова кнопку «Пуск», он не возобновит работу с того места, где остановился. Кнопка запуска была полностью отключена.
Можете ли вы убедиться, что в функции останова запущен режим false?
Я установил running = false в функции остановки, и кнопка запуска становится полностью отключенной после первого щелчка.