HTML5 Canvas / Fabric js中的动画循环 [英] Animation while loop in HTML5 Canvas / Fabric js

问题描述

编辑：为了清楚起见，问题是为什么下面的代码没有按预期工作（为什么它不会在while循环的持续时间动画），我如何改进它，我如何在单位它应该通过用户输入滑块移动。

For clarity, the question is why doesn't the code below work as expected (why does it not animate for the duration of the while loop), how can I improve it and how can I red in the unit that it should travel via a user input slider.

我的目标是让形状的动画在屏幕上。
按钮将启动和停止动画。

My aim is to have shape animates it's way down the screen. A button will start and stop the animation. There will also be an input for the rate of change or speed at which it travels.

我可以让它在屏幕上连续移动，但是下面的代码不工作 - 我使用ble作为测试变量，在最后的情况下，我希望这将替换为类似 while（stop！= true）或东西类似。

I can make it continuously travel down the screen but the following code doesn't work - I've used ble as a test variable, in the final scenario I'd hope that this would be replaced with something similar to while(stop != true) or something similar.

    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增量也应该从用户输入框读入，任何建议如何实现这也将是非常欢迎。感谢所有人和任何帮助。

the +=1 increment should also read in from a user input box, any suggestions on how to achieve this would also be very welcome. Thanks for all and any help.

推荐答案

我相信你使用Fabric JS提供动画逻辑。我的回答是基于这个假设。

I believe you are making use of Fabric JS to provide the animation logic. My answer is based on that assumption.

这个问题与你对于animate函数的工作原理的解释有关。它不是同步调用。所以你的循环将基本上初始化动画动作10次，而不是执行10个动画。假设您定义的动作是在1秒钟内将对象testDrillBit向下移动1像素，则它可能看起来没什么发生。

The issue has to do with your intepretation of how the animate function works. It is not a synchronous call. So your loop will essentially initialize the animate action 10 times, not execute 10 animations. Given that the action you defined was to move object "testDrillBit" down 1 pixel over a period of 1 seconds, it would probably appear like nothing happened.

要近似操作你试图执行，你需要使用一个回调，基本上指示动画完成时，再次执行，直到用户点击他们的停止按钮。这可能会导致生气的动画。或者，您可以为动画设置一个任意大的端点，并添加中止处理程序，但是您需要确定您的更改速率（像素/时间）以获得正确的持续时间。

To approximate the operation you are trying to perform, you would need to employ a callback that basically indicates when the animation is complete, do it again, until the user hits their "stop" button. This would probably cause a jerky animation though. Alternatively you can set an arbitrarly large endpoint for the animation and add an abort handler, but you would then need to determine your rate of change (pixels/time) to come up with the right duration.

不清楚这个库是否适合你的实现，但是我现在不能提供一个替代。下面的代码示例说明第二个选项，同时说明您要求的点，停止机制，任意变化率等。显着的变化，而不是指定+ = 1的变化率，我们改变所需的持续时间动画完成和动画在一个更大的距离（在这种情况下，画布的高度）。

It's not clear that this library is appropriate for your implementation, but I cannot offer an alternative at this time. The code example below illustrates the second option while illustrating the points you had asked for, a stop mechanism, arbitray rate of change etc. The significant change is rather than specifying +=1 for the rate of change, we alter the duration it takes for the animation to complete and animate over a larger distance (in this case the canvas height).

首先，我们添加一个停止按钮和输入为我们的速度： p>

First, we add a stop button and an input for our speed:

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

然后，在我们的脚本框中，我们确保我们可以使用这些值，然后在onclick

Then, in our script box we make sure we can use these values and then employ them in the onclick handler.

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;
    }
  });
};

上述代码应允许用户通过拉伸或缩短时间来改变速度以执行动画。此外，你有你的机制，通过执行停止动画一半。

The above code should allow the user to alter the "speed" by stretching or shortening the amount of time to perform the animation. In addition you have your mechanism to stop the animation partway through the execution.

这篇关于HTML5 Canvas / Fabric js中的动画循环的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！