Как очистить кадр анимации при вводе новой информации?

Question

У меня есть анимация фигуры 8, движущейся по экрану, и я не могу понять, как очистить анимацию, когда новая информация вводится в текстовые поля.

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

Я думаю, что это связано с набором циклов.только 20.

Как сбросить цикл и перезапустить анимацию при вводе нового пользователя?

function redraw() {
polyline.clearRect(0, 0, width, height);
}

Это, похоже, ничего не делает.

A= <input type="text" id="amp" onkeyup="tick(), redraw()" size="4"></input>

Я также вызываю две функции с помощью onkeyup в поле.

https://codepen.io/braydendevito/pen/EzJjgP

Спасибо!

Answer 1

Проблема в том, что при нажатии клавиши вы вызываете tick () и redraw () - это означает, что любая глобальная переменная, которая используется внутри этих функций, сохранитпоследнее значение.Двумя переменными, вызывающими это поведение, являются frame - которые должны быть сброшены в 0, а массив points сброшен в пустой массив.

<div align="center">
  A= <input type="text" id="amp" onkeyup="reset();" size="4"></input>
  A= <input type="text" id="freq" onkeyup="reset();" size="4"></input>
  A= <input type="text" id="speed" onkeyup="reset();" size="4"></input>
</div>


function reset()
{
  frame=0;
  points=[];
  tick();
  redraw();
}