Question

编辑：为了清楚起见，问题是为什么下面的代码不能按预期工作（为什么它没有为while循环的持续时间设置动画），我该如何改进它以及如何在单元中进行红色处理它应该通过用户输入滑块传播。

我的目标是在屏幕上塑造动画。按钮将启动和停止动画。还会有一个输入变化率或速度的输入。

我可以让它连续沿着屏幕移动但是下面的代码不起作用 - 我已经使用了ble作为测试变量，在最后的场景中我希望这会被替换为类似{{{ 1}}或类似的东西。

while(stop != true)

+ = 1增量也应该从用户输入框读入，任何关于如何实现这一点的建议也将非常受欢迎。感谢所有人和任何帮助。

Answer 1

我相信您正在使用Fabric JS来提供动画逻辑。我的答案是基于这个假设。

问题与你对动画功能如何工作的解释有关。这不是同步通话。所以你的循环基本上会初始化动画动作10次，而不是执行10个动画。鉴于您定义的操作是在1秒的时间内将对象“testDrillBit”向下移动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;
    }
  });
};

上述代码应允许用户通过拉伸或缩短执行动画的时间来改变“速度”。此外，您还拥有在执行过程中停止动画的机制。

在HTML5 Canvas / Fabric js中循环动画

1 个答案: