Анимация во время цикла в HTML5 Холст/ткань js

Question

EDIT: Для ясности возникает вопрос, почему код ниже не работает должным образом (почему он не оживляет продолжительность цикла while), как я могу его улучшить и как я могу покрасить в блок, чтобы он перемещался через ползунок пользовательского ввода.

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

Я могу постоянно перемещаться по экрану, но следующий код не работает. Я использовал в качестве тестовой переменной значение, в конечном случае я бы надеялся, что это будет заменено чем-то похожим на while(stop != true) или что-то подобное.

startDescent.onclick = function(){ 
     startDescent.disabled = true; //prevent it being clicked again 
     //animation process 
     var ble = 1; 

     while(ble < 10){ 
      console.log(ble); 
      testDrillbit.animate('top', '+=1',{ 
       duration: 1000, 
       onChange: canvas.renderAll.bind(canvas), 

       onComplete: function(){ 
        startDescent.disabled = false; 
       } 
      }); 
     ble++; 
    } 
    }; 

прирост + = 1 также следует читать от ввода пользователя, любые предложения о том, как достичь этого будет также очень приветствуются. Спасибо за всех и за помощь.

Answer 1

Я считаю, что вы используете Fabric JS для обеспечения логики анимации. Мой ответ основан на этом предположении.

Проблема связана с вашей интерпретацией того, как работает функция анимации. Это не синхронный вызов. Таким образом, ваш цикл будет по существу инициализировать действие анимации 10 раз, а не выполнять 10 анимаций. Учитывая, что действие, которое вы определили, состояло в том, чтобы переместить объект «testDrillBit» на 1 пиксель в течение 1 секунды, он, вероятно, появится, как будто ничего не произошло.

Чтобы приблизиться к операции, которую вы пытаетесь выполнить, вам нужно будет использовать обратный вызов, который в основном указывает, когда анимация будет завершена, сделайте это снова, пока пользователь не нажмет кнопку «остановить». Это, вероятно, вызовет отрывистую анимацию. В качестве альтернативы вы можете установить произвольную большую конечную точку для анимации и добавить обработчик прерывания, но тогда вам нужно будет определить свою скорость изменения (пиксели/время), чтобы получить нужную продолжительность.

Непонятно, что эта библиотека подходит для вашей реализации, но я не могу предложить альтернативу в это время. В приведенном ниже примере кода показан второй вариант, иллюстрирующий запрошенные вами точки, механизм остановки, скорость изменения арбитража и т. Д. Значительное изменение вместо указания + = 1 для скорости изменения, мы изменяем продолжительность, которую она требуется для анимация для завершения и анимации на большее расстояние (в данном случае высота холста).

Во-первых, мы добавим кнопку остановки и вход для нашей скорости:

<button id="stop" disabled="true" onclick="stop=true;">Stop</button> 
    <form> 
    <input type="text" id="speed" value="10" /> 
    </form> 

Затем, в нашем окне сценария мы делаем, что мы можем использовать эти значения, а затем использовать их в обработчике OnClick.

var stopBtn = document.getElementById('stop'); 
var speedBox = document.getElementById('speed'); 
var stop = false; 

startDescent.onclick = function() { 
    // Get our speed, in case the user changes it. Speed here is actually the duration 
    // of the animation, not a true velocity. But, we can do something like entering 0.5 
    // and "slow down" the animation 
    var speed = 10000/(new Number(speedBox.value)); 
    stop = false; // ensure that we won't abort immediately 

    stopBtn.disabled = false; // enable the stop button 
    startDescent.disabled = true; 

    // I chose canvas.height as an arbitrary fixed distance. Not this won't stop the 
    // the element from rolling out of the canvas, its just a fixed value. 
    // The significant change is the addition of the "abort" function which basically 
    // polls our stop variable to determine whether the animation should be aborted. 

    testDrillbit.animate('top', "+="+canvas.height, { 
    duration: speed, 
    abort: function() { 
      // If the user has clicked the stop button, flip our buttons 
     if (stop) { 
      startDescent.disabled = false; 
      stopBtn.disabled = true; 
     } 
     return stop; 
    }, 
    onChange: canvas.renderAll.bind(canvas), 
    onComplete: function() { 
     startDescent.disabled = false; 
     stopBtn.disabled = true; 
    } 
    }); 
}; 

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