循环动态javascript转换一个接一个，而不是一次全部

Loop kinetic javascript transitions one after other instead of all at once

本文关键字：一个 一次 全部 javascript 动态 循环 转换      更新时间：2023-09-26

我想在html5 canvas中一个接一个地排队几个转换。循环转换函数一次调用所有转换。我不知道如果回调会这样做，如果迭代超过100。我想这样做:——

(i = 0; i<10;我+ +)｛move(circle,Math.floor(Math.random()*1000),400);}

move是我定义的函数，用于进行一些转换。它工作得很好。

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

你可以这样做:

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

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

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

当然。这不是问题的解决方案，而是一种技巧。我首先将指令存储在一个单独的数组(transitionsequence)中，并对callback使用递归回调(在kinetic中定义的回调)。这不是很有效的方法，但我不在乎，只要它能解决问题。:)

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

您的方法不起作用的原因是因为浏览器没有机会在您的绘制步骤之间重新绘制画布。传统上，这是通过渲染单个步骤(帧)然后等待一小段时间来解决的，但是最近的浏览器中有一个新功能:requestAnimationFrame，它正在解决这个问题。

检查javascript动画:从setInterval到requestAnimationFrame和requestAnimationFrame的智能动画(他们还展示了如何在不支持requestAnimationFrame的浏览器中创建动画的shim)。

(我不知道kinetic.js，但它甚至可能直接支持这样的shim)。

相关文章：