Question

我想在html5 canvas中依次排队几个转换。循环转换函数一次调用所有转换。如果迭代次数超过100，我不知道回调是否会这样做。我想做这样的事情： -

为（I = 0; I＆LT; 10;我++） { move(circle,Math.floor(Math.random()*1000),400); }

move是我定义的函数，它使一些转换。工作完全正常。

在这里，我想让圆圈在每次迭代时改变它的位置，但它只改变它的位置一次。

Answer 1

你可以这样做：

var i=10;
var interval = window.setInterval(function(){
    move(circle,Math.floor(Math.random()*1000), 400);
    console.log(i);
    if(!--i) {
        window.clearInterval(interval);
    }
}, 400); // wait 400 msecs between calls

或者，如果您的移动函数在转换完成后愿意调用回调函数：

var i=10;
var callback = function(){
    if(i--){
        move(circle,Math.floor(Math.random()*1000),400, callback);
    }
}
callback();

Answer 2

是的资源。它不是问题的解决方案，而是一种技巧。我首先将指令存储在一个单独的数组（transitionsequence）中，并使用递归回调回调（动能中定义的回调）。它不是非常有效的方法，但我不在乎，只要它解决了问题。 :)

`function move2（i，limit）{

   var obj = transitionsequence[i].object;
    obj.transitionTo({
      y:100,
      duration: 0.3,
      callback : function()
      {
        obj.transitionTo({
          x:transitionsequence[i].x,
          duration:0.3,
          callback: function()
          {
            obj.transitionTo({
              y:transitionsequence[i].y,
              duration:0.3,
              callback: function()
              {
                if(i < limit)
                move2(i+1 , limit);
              }
            });

          }
        });
      }                          
    });

  };`

Answer 3

您的方法不起作用的原因是浏览器没有机会在您的绘制步骤之间重绘画布。传统上，这是通过渲染单个步骤（帧）然后等待少量时间来解决的，但是有一个新功能available in recent browsers: requestAnimationFrame，它正在解决这个确切的问题。

检查Animating with javascript: from setInterval to requestAnimationFrame和requestAnimationFrame for Smart Animating（它们还会显示如何在不支持requestAnimationFrame的浏览器中为动画设置垫片。）

（我不知道kinetic.js，但甚至可能直接支持这样的垫片）。

循环动态javascript一个接一个地转换而不是一次转换

3 个答案: